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Praise for Head First HTML and CSS 


“Head First HTML and CSS is a thoroughly modern introduction to forward-looking practices in 
web page markup and presentation. It correctly anticipates readers’ puzzlements and handles 
them just in time. The highly graphic and incremental approach precisely mimics the best way 


to learn this stuff: make a small change and see it in the browser to understand what each new 
item means.” 


— Danny Goodman, author of Dynamic HTML: The Definitive Guide 


“Eric Freeman and Elisabeth Robson clearly know their stuff. As the Internet becomes more com- 
plex, inspired construction of web pages becomes increasingly critical. Elegant design is at the core 
of every chapter here, each concept conveyed with equal doses of pragmatism and wit.” 


— Ken Goldstein, Executive Vice President and 
Managing Director, Disney Online 


“The Web would be a much better place if every HTML author started off by reading this 
book.” 


— L. David Baron, Technical Lead, Layout and CSS, Mozilla Corporation 
http: //dbaron.org/ 


“TPve been writing HTML and CSS for 10 years now, and what used to be a long trial-and- 
error learning process has now been reduced neatly into an engaging paperback. HTML used 
to be something you could just hack away at until things looked okay on screen, but with the 
advent of web standards and the movement toward accessibility, sloppy coding practice is not 
acceptable anymore...from a business standpoint or a social responsibility standpoint. Head 
First HTML and CSS teaches you how to do things right from the beginning without making the 
whole process seem overwhelming. HTML, when properly explained, is no more complicated 
than plain English, and the authors do an excellent job of keeping every concept at eye level.” 


— Mike Davidson, President and CEO, Newsvine, Inc. 


“The information covered in this book is the same material the pros know, but taught in an 
educational and humorous manner that doesn’t ever make you think the material is impossible 
to learn or you are out of your element.” 


— Christopher Schmitt, author of The CSS Cookbook 
and Professional CSS, schmitt@christopher.org 


“Oh, great. You made an HTML book simple enough a CEO can understand it. What will you 
do next? Accounting simple enough my developer can understand it? Next thing you know, we’ll 
be collaborating as a team or something.” 


— Janice Fraser, CEO, Adaptive Path 
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More Praise for Head First HTML and CSS 


“T *heart* Head First HTML and CSS—it teaches you everything you need to learn in a ‘fun 
coated’ format!” 


— Sally Applin, UI designer and fine artist, hitp://sally.com 


“This book has humor and charm, but most importantly, it has heart. I know that sounds 
ridiculous to say about a technical book, but I really sense that at its core, this book (or at least 
its authors) really care that the reader learns the material. This comes across in the style, the 
language, and the techniques. Learning—real understanding and comprehension—on the part 
of the reader is clearly topmost in the minds of the authors. And thank you, thank you, thank 
you, for the book’s strong and sensible advocacy of standards compliance. It’s great to see an 
entry-level book, that I think will be widely read and studied, campaign so eloquently and 
persuasively on behalf of the value of standards compliance in web page code. I even found 
in here a few great arguments I had not thought of—ones I can remember and use when I am 
asked (as I still am)—‘what’s the deal with compliance and why should we care?’ Pll have more 
ammo now! I also liked that the book sprinkles in some basics about the mechanics of actually 
getting a web page live—F TP, web server basics, file structures, etc.” 


— Robert Neer, Director of Product Development, Movies.com 


“Head First HIML and CSS is a most entertaining book for learning how to build a great web 
page. It not only covers everything you need to know about HTML and CSS, it also excels in 
explaining everything in layman’s terms with a lot of great examples. I found the book truly 


p> 


enjoyable to read, and I learned something new 


— Newton Lee, Editor-in-Chief, ACM Computers in Entertainment 
http: / /www.acmcie.org 


“My wife stole the book. She’s never done any web design, so she needed a book like Head First 
HTML and CSS to take her from beginning to end. She now has a list of websites she wants to 
build—for our son’s class, our family...If I’m lucky, I’ll get the book back when she’s done.” 


— David Kaminsky, Master Inventor, IBM 


“Beware. If you’re someone who reads at night before falling asleep, you'll have to restrict Head 
First HTML and CSS to daytime reading. This book wakes up your brain.” 


— Pauline McNamara, Center for New Technologies and Education, 
Fribourg University, Switzerland 
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Praise for other books by Eric Freeman and Elisabeth Robson 


“From the awesome Head First Java folks, this book uses every conceivable trick to help you 
understand and remember. Not just loads of pictures: pictures of humans, which tend to interest 
other humans. Surprises everywhere. Stories, because humans love narrative. (Stories about things 
like pizza and chocolate. Need we say more?) Plus, it’s darned funny.” 


— Bill Camarda, READ ONLY 


“This book’s admirable clarity, humor, and substantial doses of clever make it the sort of book that 
helps even nonprogrammers think well about problem solving.” 


— Cory Doctorow, co-editor of Boing Boing 
and author of Down and Out in the Magic Kingdom 
and Someone Comes to Town, Someone Leaves Town 


“T feel like a thousand pounds of books have just been lifted off of my head.” 


— Ward Cunningham, inventor of the wiki 
and founder of the Hillside Group 


“This book is close to perfect, because of the way it combines expertise and readability. It speaks with 
authority and it reads beautifully. It’s one of the very few software books I’ve ever read that strikes 
me as indispensable. (I’'d put maybe 10 books in this category, at the outside.)” 


— David Gelernter, professor of computer science, 
Yale University, and author of Mirror Worlds and Machine Beauty 


“A nosedive into the realm of patterns, a land where complex things become simple, but where 
simple things can also become complex. I can think of no better tour guides than these authors.” 


— Miko Matsumura, industry analyst, The Middleware Company 
former Chief Java Evangelist, Sun Microsystems 


“T laughed, I cried, it moved me.” 


— Daniel Steinberg, Editor-in-Chief, java.net 


“Just the right tone for the geeked-out, casual-cool guru coder in all of us. The right reference for 
practical development strategies—gets my brain going without having to slog through a bunch of 
tired, stale professor-speak.” 


— Travis Kalanick, founder of Scour and Red Swoosh, 
member of the MIT TR100 


“T literally love this book. In fact, I kissed this book in front of my wife.” 


— Satish Kumar 


www.it-ebooks.info 


Other O’Reilly books by Eric Freeman and Elisabeth Robson 
Head First Design Patterns 
Head First HTML with CSS & XHTML (first edition) 
Head First HTML5 Programming 


Other related books from O’Reilly 
HTMLS: Up and Running 
HTML5 Canvas 
HTMLS: The Missing Manual 
HTML5 Geolocation 
HTML5 Graphics with SVG and CSS3 
HTML5 Forms 
HTML5 Media 


Other books in O’Reilly’s Head First series 
Head First C# 
Head First Java 
Head First Object-Oriented Analysis & Design (OQOA&D) 
Head First Servlets and JSP 
Head First SQL 
Head First Software Development 
Head First JavaScript 
Head First Ajax 
Head First Rails 
Head First PHP & MySQL 
Head First Web Design 
Head First Networking 
Head First iPhone and iPad Development 


Head First jQuery 
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Browser wars¢ You'll 


L Lind out in Chapter >. 


To the W3G, for saving us from the browser wars and 
for their brilliance in separating structure (H'TML) from 
presentation (CSS)... 


And for making HTML and CSS complex enough that 
people need a book to learn it. 
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the authors 


Authors of Head First HTML and CSS 


Evie Freeman 


Eric is described by Head First series co-creator Kathy 
Sierra as “one of those rare individuals fluent in the language, 
practice, and culture of multiple domains from hipster 
hacker, corporate VP, engineer, think tank.” 


Professionally, Eric recently ended nearly a decade as a media 
company executive—having held the position of CTO of 
Disney Online and Disney.com at the Walt Disney Company. 
Eric is now devoting his time to WickedlySmart, a startup he 
co-created with Elisabeth. 


By training, Eric is a computer scientist, having studied with 
industry luminary David Gelernter during his Ph.D. work 

at Yale University. His dissertation is credited as the seminal 
work in alternatives to the desktop metaphor, and also as the 
first umplementation of activity streams, a concept he and Dr. 
Gelernter developed. 


In his spare time, Eric is deeply involved with music; you'll 
find Eric’s latest project, a collaboration with ambient music 
pioneer Steve Roach, available on the iPhone App Store 
under the name Immersion Station. 


Eric lives with his wife and young daughter on Bainbridge 
Island. His daughter is a frequent vistor to Eric’s studio, where 


she loves to turn the knobs of his synths and audio effects. 


Write to Eric at eric@wickedlysmart.com or visit his site 
at http://ericfreeman.com. 
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FE Flisabeth Robson 


Elisabeth is a software engineer, writer, and trainer. 
She has been passionate about technology since her 
days as a student at Yale University, where she earned a 
master’s of science in computer science and designed a 
concurrent, visual programming language and software 
architecture. 


Elisabeth’s been involved with the Internet since the 
early days; she co-created the award-winning website, 
the Ada Project, one of the first websites designed 

to help women in computer science find career and 
mentorship information online. 


She’s currently co-founder of WickedlySmart, an online 
education experience centered on web technologies, 
where she creates books, articles, videos and more. 
Previously, as Director of Special Projects at O’Reilly 
Media, Elisabeth produced in-person workshops and 
online courses on a variety of technical topics and 
developed her passion for creating learning experiences 
to help people understand technology. Prior to her work 
with O’Reilly, Elisabeth spent time spreading fairy dust 
at the Walt Disney Company, where she led research 
and development efforts in digital media. 


When not in front of her computer, you'll find Elisabeth 
hiking, cycling or kayaking in the great outdoors, with 
her camera nearby, or cooking vegetarian meals. 


You can send her email at beth@wickedlysmart.com 
or visit her blog at http: //elisabethrobson.com. 
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Intro 
Your brain on HTML and CSS. Here you are trying to learn something, while 


here your brain is doing you a favor by making sure the learning doesn’t stick. Your brain’s 
thinking, “Better leave room for more important things, like which wild animals to avoid 
and whether naked snowboarding is a bad idea.” So how do you trick your brain into 


thinking that your life depends on knowing HTML and CSS? 


Who is this book for ? XXV1 
Metacognition Xxix 
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getting to know html 


The Language of the Web 


The only thing that is standing between you and getting 
yourself on the Web is learning to speak the lingo: 
HyperText Markup Language, or HTML for short. So, get ready for some language 
lessons. After this chapter, not only are you going to understand some basic 
elements of HTML, but you'll also be able to speak HTML with a little style. Heck, 
by the end of this book, you'll be talking HTML like you grew up in Webville. 


The web killed the radio star 2 
What does the web server do? 3 
What you write (the HTML) 4 
What the browser creates 5 
No pressure, but 
thousands of people are going Your big break at Starbuzz Coffee 9 
to visit this web page when you're 
finished. It not only needs to be Creating the Starbuzz web page 11 
correct, it's gotta look great, 
tool Creating an HTML file (Mac) 12 
Creating an HTML file (Windows) 14 
Meanwhile, back at Starbuzz Coffee... 17 
Saving your work 18 
Opening your web page in a browser 19 
Take your page for a test drive 20 
Are we there yet? 23 
Another test drive 24 
Tags dissected 25 
Meet the style element 29 
Giving Starbuzz some style... 30 
Cruisin’ with style... 31 
Exercise Solutions 38 
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“Found it, here ya go” 
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going further with hypertext 


Meeting the “HT” in HTML 


table of contents 


Did someone say “hypertext?” What’s that? On, only the entire 
basis of the Web. In Chapter 1 we kicked the tires of HTML and found it to be a nice 
markup language (the “ML” in HTML) for describing the structure of web pages. Now 


we’re going to check out the “HT” in HTML, hypertext, which will let us break free of 


a single page and link to other pages. Along the way we’re going to meet a powerful 


new element, the <a> element, and learn how being “relative” is a groovy thing. So, 


fasten your seat belts—you’re about to learn some hypertext. 
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Fixing those broken images... 


Exercise Solutions 
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building blocks 


Web Page Construction 


| was told I’d actually be creating web pages in this book? 
You’ve certainly learned a lot already: tags, elements, links, paths...but it’s all for 
nothing if you don’t create some killer web pages with that knowledge. In this chapter 
we’re going to ramp up construction: you’re going to take a web page from conception 
to blueprint, pour the foundation, build it, and even put on some finishing touches. All 
you need is your hard hat and your toolbelt, as we'll be adding some new tools and 


giving you some insider knowledge that would make Tim “The Toolman” Taylor proud. 


From journal to website, at 12 mph 79 
The rough design sketch 80 
From a sketch to an outline 81 
eee a eae From the outline to a web page 82 
: Test-driving Tony’s web page 84 
I h2 ) Adding some new elements 85 
Meet the <q> element 86 
| = | Looooong quotes 90 
Adding a_ blockquote 91 
po | The real truth behind the <q> and <blockquote> mystery 94 
Meanwhile, back at Tony’s site... 100 
a Of course, you could use the <p> element to make a list... 101 
P | Constructing HTML lists in two easy steps 102 
| Taking a test drive through the cities 104 
Putting one element inside another is called “nesting” 107 
‘To understand the nesting relationships, draw a picture 108 
Using nesting to make sure your tags match 109 
p | Exercise Solutions 117 
a 
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petting connected 
A Trip to Webville 


Web pages are a dish best served on the Internet. So far 
you’ve only created HTML pages that live on your own computer. You've also 
only linked to pages that are on your own computer. We’re about to change all 
that. In this chapter we'll encourage you to get those web pages on the Internet 
where all your friends, fans, and customers can actually see them. We'll also 
reveal the mysteries of linking to other pages by cracking the code of the h, t, t, p, 


:, /,/, W, W, W. So, gather your belongings; our next stop is Webville. 


Getting Starbuzz (or yourself) onto the Web 124 
Finding a hosting company 125 
How can you get a domain name? 126 
Moving in 128 
Getting your files to the root folder 129 
As much FTP as you can possibly fit in two pages 130 
Back to business... 133 
Mainstreet, USA 134 
What is HTTP? 135 
What’s an absolute path? 136 
How default pages work 139 
Earl needs a little help with his URLs 140 
How do we link to other websites? 142 
Linking to Caffeine Buzz 143 
And now for the test drive... 144 
Web page fit and finish 147 
The title test drive... 148 
Linking into a page 149 
Using the id attribute to create a destination for <a> 150 
How to link to elements with ids 151 
Linking to a new window 155 
f Opening a new window using target 156 
1g Exercise Solutions 160 


xiii 
www.it-ebooks.info 


table of contents 


adding images to your pages 
Meeting the Media 


Smile and say “cheese.” Actually, smile and say “gif,” 
“jpg,” or “png”—these are going to be your choices when “developing 
pictures” for the Web. In this chapter you’re going to learn all about adding your 
first media type to your pages: images. Got some digital photos you need to get 
online? No problem. Got a logo you need to get on your page? Got it covered. 
But before we get into all that, don’t you still need to be formally introduced to 

the <img> element? So sorry, we weren’t being rude; we just never saw the “right 
opening.” To make up for it, here’s an entire chapter devoted to <img>. By the end 
of the chapter you’re going to know all the ins and outs of how to use the <img> 
element and its attributes. You’re also going to see exactly how this little element 


causes the browser to do extra work to retrieve and display your images. 


How the browser works with images 164 

How images work 167 

i ate Here's one pixel <img>: it’s not just relative links anymore 171 
Be ota ) Always provide an alternative 173 
the betel ° —\) a Sizing up your images 174 
| Creating the ultimate fan site: myPod 175 

: Whoa! The image is way too large 178 

Open the image 182 

Resizing the image 183 

Fixing up the myPod HTML 188 

More photos for myPod 190 

Thi image it pa Turning the thumbnails into links 196 

oe on Create individual pages for the photos 197 

So, how do I make links out of images? 198 

What format should we use? 203 

To be transparent, or not to be transparent? That is the question... 204 

Wait, what is the color of the web page background? 206 

Check out the logo with a matte 207 

Add the logo to the myPod web page 208 

Exercise Solutions 213 


XiV 
www.it-ebooks.info 


table of contents 


standards and all that jazz 
Serious HTML 


What else is there to know about HTML? You're well on your way to 
mastering HTML. In fact, isn’t it about time we move on to CSS and learn how to make 
all this bland markup look fabulous? Before we do, we need to make sure your HTML 


is really ready for the big leagues. Don’t get us wrong, you’ve been writing first-class 


HTML all along, but there are just a few extra things you need to do to make it “industry 


standard” HTML. It’s also time you think about making sure you’re using the latest and 
greatest HTML standard, otherwise known as HTML5. By doing so, you'll ensure that 
your pages play well with the latest i-Device, and that they'll display more uniformly 
across all browsers (at least the ones you’d care about). You’ll also have pages that 
load faster, pages that are guaranteed to play well with CSS, and pages that are ready 
to move into the future as the standards grow. Get ready, this is the chapter where you 


move from web tinkerer to web professional. 


A Brief History of HTML 222 
The new, and improved, HTML5 doctype 227 
HTML, the new “living standard” 228 
Adding the document type definition 229 
The doctype test drive 230 
Meet the W3C validator 233 
Validating the Head First Lounge 234 
Houston, we have a problem... 235 
Fixing that error 236 
We’re almost there... 237 
Adding a <meta> tag to specify the character encoding 239 


Making the validator (and more than a few browsers) happy 


with a <meta> tag... 240 
Third time’s the charm? 241 
Calling all HTML professionals, grab the handbook... 244 
Exercise Solutions 251 
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getting started with CSS 
Adding a Little Style 


| was told there’d be CSS in this book. So far you’ve been 
concentrating on learning HTML to create the structure of your web pages. But as 
you can see, the browser’s idea of style leaves a lot to be desired. Sure, we could 
call the fashion police, but we don’t need to. With CSS, you’re going to completely 
control the presentation of your pages, often without even changing your HTML. 
Could it really be so easy? Well, you are going to have to learn a new language; 
after all, Webville is a bilingual town. After reading this chapter’s guide to learning 
the language of CSS, you’re going to be able to stand on either side of Main Street 


and hold a conversation. 


You’re not in Kansas anymore 256 

Overheard on Webville’s “Trading Spaces” 258 

Using CSS with HTML 259 

Getting CSS into your HTML 261 

9 9 Adding style to the lounge 262 
Five-Minute Let’s put a line under the welcome message too 265 
Mystery a So, how do selectors really work? 267 
Seeing selectors visually 270 

Getting the Lounge style into the elixirs and directions pages 273 

It’s time to talk about your inheritance... 281 

Overriding inheritance 284 

Adding an element to the greentea class 287 

Creating a class selector 288 

Taking classes further... 290 

The world’s smallest and fastest guide to how styles are applied 292 

Exercise Solutions 303 
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styling with fonts and colors 


Expanding Your Vocabulary 


Your CSS language lessons are coming along nicely. You 
already have the basics of CSS down, and you know how to create CSS rules to 
select and specify the style of an element. Now it’s time to build your vocabulary, 
and that means picking up some new properties and learning what they can do 
for you. In this chapter we’re going to work through some of the most common 
properties that affect the display of text. To do that, you'll need to learn a few 
things about fonts and color. You're going to see you don’t have to be stuck with 
the fonts everyone else uses, or the clunky sizes and styles the browser uses as 
the defaults for paragraphs and headings. You’re also going to see there is a lot 


more to color than meets the eye. 


Text and fonts from 30,000 feet 312 

What is a font family anyway? 314 

Specifying font families using CSS 317 

Dusting off Tony’s journal 318 

How do I deal with everyone having different fonts? 321 

How Web Fonts work 323 

How to add a Web Font to your page... 325 

Adjusting font sizes 328 

So, how should I specify my font sizes? 330 

Let’s make these changes to the font sizes in Tony’s web page 332 

A Changing a font’s weight 335 

4 2 ¢ 9 = « c Adding style to your fonts 337 
Yh f % 4 a * Styling Tony's quotes with a little italic 338 
(aa ty pee a How do web colors work? 340 
; How do I specify web colors? Let me count the ways... 343 

The two-minute guide to hex codes 346 

How to find web colors 348 

Back to Tony’s page... 351 

Everything you ever wanted to know about text-decorations 353 

Removing the underline... 354 

Exercise Solutions 357 
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the box medel 


Getting Intimate with Elements 


To do advanced web construction, you really need to know 
your building materials. In this chapter we're going to take a close look 

at our building materials: the HTML elements. We’re going to put block and inline 
elements right under the microscope and see what they’re made of. You’ll see how 
you can control just about every aspect of how an element is constructed with CSS. 
But we don’t stop there—you'll also see how you can give elements unique identities. 
And, if that weren’t enough, you’re going to learn when and why you might want to 


use multiple stylesheets. So, turn the page and start getting intimate with elements. 


The lounge gets an upgrade 362 
Starting with a few simple upgrades 364 
Checking out the new line height 366 
Getting ready for some major renovations 367 
A closer look at the box model 368 
What you can do to boxes 370 
Creating the guarantee style 375 
A test drive of the paragraph border 376 
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— How do you add padding only on the left? 384 
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divs and spans 


Advanced Web Construction 


It’s time to get ready for heavy construction. in this chapter 
we’re going to roll out two new HTML elements: <div> and <span>. These are no 
simple “two by fours”; these are full-blown steel beams. With <div> and <span>, 
you’re going to build some serious supporting structures, and once you've got those 
structures in place, you’re going to be able to style them all in new and powerful 
ways. Now, we couldn't help but notice that your CSS toolbelt is really starting to 

fill up, so it’s time to show you a few shortcuts that will make specifying all these 
properties a lot easier. And we’ve also got some special guests in this chapter, 
the pseudo-classes, which are going to allow you to create some very interesting 


selectors. (If you’re thinking that “pseudo-classes” would make a great name for your 
next band, too late; we beat you to it.) 
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The cascade 
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Putting it all together 461 
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layout and positioning 


Arranging Elements (« 
It’s time to teach your HTML elements new tricks. We're not 
going to let those HTML elements just sit there anymore—it’s about time they get 

up and help us create some pages with real layouts. How? Well, you’ve got a good 
feel for the <div> and <span> structural elements and you know all about how the 
box model works, right? So, now it’s time to use all that knowledge to craft some real 
designs. No, we’re not just talking about more background and font colors—we’re 
talking about full-blown professional designs using multicolumn layouts. This is the 


chapter where everything you’ve learned comes together. 
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Modern HTML 


So, we’re sure you’ve heard the hype around HTMLS. And, 
given how far along you are in this book, you’re probably wondering if you made the 
right purchase. Now, one thing to be clear about, up front, is that everything you've 
learned in this book has been HTML, and more specifically has met the HTML5 
standard. But there are some new aspects of HTML markup that were added with 
the HTML5 standard that we haven't covered yet, and that’s what we’re going to do 
in this chapter. Most of these additions are evolutionary, and you’re going to find you 
are quite comfortable with them given all the hard work you've already done in this 
book. There’s some revolutionary stuff too (like video), and we'll talk about that in this 


chapter as well. So, let’s dive in and take a look at these new additions! 
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tables and more lists 


Getting Tabular 


If it walks like a table and talks like a table... There comes a time 


in life when we have to deal with the dreaded fabular data. Whether you need to 


create a page representing your company’s inventory over the last year or a catalog 


of your vinylmation collection (don’t worry, we won't tell), you know you need to do 


it in HTML, but how? Well, have we got a deal for you: order now, and in a single 


chapter we'll reveal the secrets that will allow you to put your very own data right 


inside HTML tables. But there’s more: with every order we'll throw in our exclusive 


guide to styling HTML tables. And, if you act now, as a special bonus, we'll throw in 


our guide to styling HTML lists. 


Don't hesitate; call now! 
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Getting Interactive 


So far all your web communication has been one-way: 


from your page to your visitors. Golly, wouldn't it be nice if your visitors 


could talk back? That’s where HTML forms come in: once you enable your pages 
with forms (along with a little help from a web server), your pages are going to be 


able to gather customer feedback, take an online order, get the next move in an 


online game, or collect the votes in a “hot or not” contest. In this chapter you’re going 


to meet a whole team of HTML elements that work together to create web forms. 


You'll also learn a bit about what goes on behind the scenes in the server to support 


forms, and we'll even talk about keeping those forms stylish. 
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How forms work 

What you write in HTML 

What the browser creates 

How the <form> element works 

Getting ready to build the Bean Machine form 
Adding the <form> element 

How form element names work 

Back to getting those <input> elements into your HTML 
Adding some more input elements to your form 
Adding the <select> element 

Give the customer a choice of whole or ground beans 
Punching the radio buttons 

Using more input types 

Adding the number and date input types 
Completing the form 

Adding the checkboxes and text area 

Watching GET in action 

Getting the form elements into HTML structure 
Styling the form with CSS 

A word about accessibility 

What more could possibly go into a form? 
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appendix: leftovers 
The Top Ten Topics (We Didn’t Cover) 


We covered a lot of ground, and 
you’re almost finished with this 
book. We'll miss you, but before we let you 
go, we wouldn’t feel right about sending you out 
into the world without a little more preparation. 
We can’t possibly fit everything you'll need to 
know into this relatively short chapter. Actually, 
we did originally include everything you need to 
know about HTML and CSS (not already covered 
by the other chapters), by reducing the type point 
size to .00004. It all fit, but nobody could read it. 


So, we threw most of it away, and kept the best 


bits for this Top Ten appendix. 


#1 More CSS selectors 698 
#2 Vendor-specific CSS properties 700 
#3 CSS transforms and transitions 701 
#4 Interactivity 703 
#5 HTMLS APIs and web apps 704 
#6 More on Web Fonts 706 
#7 Tools for creating web pages 707 
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#10 Audio 710 
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how to use this book 


Who is this book for? 


If you can answer “yes” to all of these: 


@) Do you have access to a computer with a web browser 
and a text editor? 


@ Do you want to learn, understand, and remember how 
to create web pages using the best techniques and the 
most recent standards? 


©) Do you prefer stimulating dinner-party conversation 
to dry, dull, academic lectures? 


this book is for you. 


Who should probably back away from this book? 


If you can answer “yes” to any one of these: 


@) Are you completely new to computers? 


(You don’t need to be advanced, but you should 
understand folders and files, simple text editing 
applications, and how to use a web browser.) 


@) Are you a kick-butt web developer looking for a 
reference book? 


® Are you afraid to try something different? Would 
you rather have a root canal than mix stripes with 
plaid? Do you believe that a technical book can’t be 
serious if HTML tags are anthropomorphized? 


As 


‘* 


w 


this book is not for you. 


CNote from marketing: this book is 
for anyone with a éredit card.J 
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If you have access to any 
computer manufactured 
in the last decade, the 


answer is yes. 


the intro 


We know what youre thinking. 


“How can this be a serious book?” 
“What’s with all the graphics?” 


“Can I actually learn it this way?” 


And we know what your brain is thinking. 


Your brain craves novelty. It’s always searching, scanning, waiting for 
something unusual. It was built that way, and it helps you stay alive. 


Today, you’re less likely to be a tiger snack. But your brain’s still looking. 
You just never know. 


So what does your brain do with all the routine, ordinary, normal things 
you encounter? Everything it can to stop them from interfering with the 
brain’s real job—recording things that matter. It doesn’t bother saving the 
boring things; they never make it past the “this is obviously not important” 
filter. 


How does your brain Anow what’s important? Suppose you’re out for a day 
hike and a tiger jumps in front of you—what happens inside your head 


and body? Great. Only 
Neurons fire. Emotions crank up. Chemicals surge. aad el dull, dry, 
boring pages. 


And that’s how your brain knows... 
This must be important! Don’t forget it! 


But imagine you’re at home, or in a library. It’s a safe, warm, tiger- 
free zone. You’re studying. Getting ready for an exam. Or trying to 
learn some tough technical topic your boss thinks will take a week, 
10 days at the most. 


Just one problem. Your brain’s trying to do you a big favor. It’s 
trying to make sure that this obviously non-important content doesn’t 
clutter up scarce resources. Resources that are better spent storing 
the really dg things. Like tigers. Like the danger of fire. Like how 
you should never again snowboard in shorts. 


And there’s no simple way to tell your brain, “Hey brain, thank 
you very much, but no matter how dull this book is, and how little 
I’m registering on the emotional Richter scale right now, I really do 
want you to keep this stuff around.” 
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We think of a “Head First” reader a8 3 learner. 


So what does it take to Jearn something? First, you have to getit, then make 
sure you don’t forget it. It’s not about pushing facts into your head. Based 
on the latest research in cognitive science, neurobiology, and educational 
psychology, learning takes a lot more than text on a page. We know what 
turns your brain on. 


. Browsers make requests for HTML 
Some of the Head First learning principles: er ee oan 


Make it visual. Images are far more memorable than words 


alone, and make learning much more effective (up to 89% 


improvement in recall and transfer studies). It also makes things 
more understandable. Put the words within or near the Web genet 


. 


“Found it, here ya go” 


graphics they relate to, rather than on the bottom or on another 


page, and learners will be up to twice as likely to solve problems 


related to the content. 


Use a conversational and personalized style. In recent studies, 


Tt really sucks to forget 
your <body? element. 


students performed up to 40% better on post-learning tests if the content 
spoke directly to the reader, using a first-person, conversational style rather than 


taking a formal tone. Tell stories instead of lecturing. Use casual language. Don't 


Ps take yourself too seriously. Which would you pay more attention to: a 


; . ; S . ‘5 
stimulating dinner party companion, or a lecture! Does it make sense to 


create a bathtub class for 
my style, or just to style 
the whole bathroom? 


y 


unless you actively flex your neurons, nothing much happens in your 


| a Get the learner to think more deeply. In other words, 
| 


head. A reader has to be motivated, engaged, curious, and inspired 


» | to solve problems, draw conclusions, and generate new 


\ knowledge. And for that, you need challenges, exercises, 


The head clners . and thought-provoking questions, and activities that 
0S 
where YO“ ae ? involve both sides of the brain, and multiple senses. 
shout yore ; 


Get—and keep—the reader’s attention. We've all 


had the “I really want to learn this, but | can’t stay awake past page one” 


experience. Your brain pays attention to things that are out of the ordinary, 


interesting, strange, eye-catching, unexpected. Learning a new, tough, technical topic doesn't have 


to be boring. Your brain will learn much more quickly if it’s not. 


Touch their emotions. We now know that your ability to remember something is largely 


dependent on its emotional content. You remember what you care about. You remember when 


you feel something. No, we're not talking heart-wrenching stories about a boy and his dog. We're 


talking emotions like surprise, curiosity, fun, “what the...?", and the feeling of “I rule!” that comes 


when you solve a puzzle, learn something everybody else thinks is hard, or realize you know 


something that “I’m more technical than thou” Bob from engineering doesn't. 
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Metacognition: thinking about thinking 


If you really want to learn, and you want to learn more quickly and more deeply, 


I wonder how I 
can trick my brain 
into remembering 
this stuff... 


pay attention to how you pay attention. Think about how you think. Learn how you 
learn. 


Most of us did not take courses on metacognition or learning theory when we were 
growing up. We were expected to learn, but rarely taught how to learn. 


But we assume that if you’re holding this book, you really want to learn 
how to create web pages. And you probably don’t want to spend a lot of 
time. And you want to remember what you read, and be able to apply it. 
And for that, you’ve got to understand it. To get the most from this book, 
or any book or learning experience, take responsibility for your brain. 
Your brain on éhzs content. 


The trick is to get your brain to see the new material you’re learning as 
Really Important. Crucial to your well-being. As important as a tiger. 
Otherwise, you’re in for a constant battle, with your brain doing its best 
to keep the new content from sticking. 


So how DO you get your brain to think HTML & CSS 
are as important as a tiger? 


There’s the slow, tedious way, or the faster, more effective way. The 
slow way 1s about sheer repetition. You obviously know that you ave 
able to learn and remember even the dullest of topics, if you keep pounding on the same 
thing. With enough repetition, your brain says, “This doesn’t feel important to him, but he 
keeps looking at the same thing over and over and over, so I suppose it must be.” 


The faster way is to do anything that increases brain activity, especially different 
types of brain activity. The things on the previous page are a big part of the solution, 
and they’re all things that have been proven to help your brain work in your favor. For 
example, studies show that putting words wthin the pictures they describe (as opposed to 
somewhere else in the page, like a caption or in the body text) causes your brain to try 
to make sense of how the words and picture relate, and this causes more neurons to fire. 
More neurons firing = more chances for your brain to get that this is something worth 
paying attention to, and possibly recording. 


A conversational style helps because people tend to pay more attention when they 
perceive that they’re in a conversation, since they’re expected to follow along and hold up 
their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” 
is between you and a book! On the other hand, if the writing style is formal and dry, your 
brain perceives it the same way you experience being lectured to while sitting in a roomful 
of passive attendees. No need to stay awake. 


But pictures and conversational style are just the beginning. 
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Here's what WE did: 


We used pictures, because your brain is tuned for visuals, not text. As far as your brain’s 
concerned, a picture really 7s worth 1,024 words. And when text and pictures work together, we 


embedded the text zm the pictures because your brain works more effectively when the text is 
within the thing the text refers to, as opposed to in a caption or buried in the text somewhere. 


We used redundancy, saying the same thing in different ways and with different media types, 
and multiple senses, to increase the chance that the content gets coded into more than one area of 
your brain. 


We used concepts and pictures in unexpected ways because your brain is tuned for novelty, 
and we used pictures and ideas with at least some emotional content, because your brain is 
tuned to pay attention to the biochemistry of emotions. That which causes you to feel something 
is more likely to be remembered, even if that feeling is nothing more than a little humor, 
surprise, or interest. 


We used a personalized, conversational style, because your brain is tuned to pay more 


attention when it believes you’re in a conversation than if it thinks you’re passively listening to a 


Be the Browser 


presentation. Your brain does this even when you're reading. 


We included more than 100 activities, because your brain is tuned to learn and remember 
more when you do things than when you read about things. And we made the exercises 
challenging-yet-doable, because that’s what most people prefer. 


We used multiple learning styles, because_you might prefer step-by-step procedures, while > 
someone else wants to understand the big picture first, while someone else just wants to see a BULLET POINTS : 
code example. But regardless of your own learning preference, everyone benefits from seeing the 

same content represented in multiple ways. 


We include content for both sides of your brain, because the more of your brain you 
engage, the more likely you are to learn and remember, and the longer you can stay focused. Puzzles 
Since working one side of the brain often means giving the other side a chance to rest, you can 7 

be more productive at learning for a longer period of time. 


And we included stories and exercises that present more than one point of view, because 
your brain is tuned to learn more deeply when it’s forced to make evaluations and judgments. 


We included challenges, with exercises, and by asking questions that don’t always have 

a straight answer, because your brain is tuned to learn and remember when it has to work at 
something. Think about it—you can’t get your body in shape just by watching people at the gym. 
But we did our best to make sure that when you’re working hard, it’s on the right things. That 
you’re not spending one extra dendrite processing a hard-to-understand example, or 
parsing difficult, jargon-laden, or overly terse text. 


We used people. In stories, examples, pictures, etc., because, well, because_you’re a person. And 
your brain pays more attention to people than it does to things. 


We used an 80/20 approach. We assume that if you’re going to be a kick-butt web developer, 
this won't be your only book. So we don’t talk about everything. Just the stuff you'll actually need. 
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Here's what YOU can do to bend 
your brain into submission 


So, we did our part. The rest is up to you. These tips are a 


starting point; listen to your brain and figure out what works 


for you and what doesn’t. Try new things. 


Cut this out and stick it 


— 
en.) Your refrigerator. 


Slow down. The more you understand, 
the less you have to memorize. 

Don’t just read. Stop and think. When the 
book asks you a question, don’t just skip to the 
answer. Imagine that someone really zs asking 
the question. The more deeply you force your 
brain to think, the better chance you have of 
learning and remembering. 


Do the exercises. Write your own notes. 


We put them in, but if we did them for you, 
that would be like having someone else do 
your workouts for you. And don’t just look at 
the exercises. Use a pencil. There’s plenty of 
evidence that physical activity while learning 
can increase the learning. 


Read the “There Are No Dumb Questions.” 
That means all of them. They’re not optional 
sidebars—they’re part of the core content! 
Don’t skip them. 


Make this the last thing you read before 
bed. Or at least the last challenging thing. 
Part of the learning (especially the transfer to 
long-term memory) happens after you put the 
book down. Your brain needs time on its own, to 
do more processing. If you put in something new 
during that processing time, some of what you 
just learned will be lost. 


Drink water. Lots of it. 

Your brain works best in a nice bath of fluid. 
Dehydration (which can happen before you ever 
feel thirsty) decreases cognitive function. 


© 


Talk about it. Out loud. 


Speaking activates a different part of the brain. 
If you’re trying to understand something, or 
increase your chance of remembering it later, say 
it out loud. Better still, try to explain it out loud 
to someone else. You'll learn more quickly, and 
you might uncover ideas you hadn’t known were 
there when you were reading about it. 


Listen to your brain. 


Pay attention to whether your brain is getting 
overloaded. If you find yourself starting to skim the 
surface or forget what you just read, it’s time for a 
break. Once you go past a certain point, you won’t 
learn faster by trying to shove more in, and you 
might even hurt the process. 


Feel something! 


Your brain needs to know that this matters. Get 
involved with the stories. Make up your own 
captions for the photos. Groaning over a bad joke is 
still better than feeling nothing at all. 


Create something! 


Apply this to something new you’re designing, or 
rework an older project. Just do something to get some 
experience beyond the exercises and activities in 

this book. All you need is a pencil and a problem 

to solve...a problem that might benefit from using 


HTML and CSS. 
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Read me 


This is a learning experience, not a reference book. We deliberately stripped out 
everything that might get in the way of learning whatever it is we’re working on at that 
point in the book. And the first time through, you need to begin at the beginning, because 
the book makes assumptions about what you’ve already seen and learned. 


We begin by teaching basic HTML, then standards-based HTML5. 


To write standards-based HTML, there are a lot of technical details you need to 
understand that aren’t helpful when you're trying to learn the basics of HTML. Our 
approach is to have you learn the basic concepts of HTML first (without worrying about 
these details), and then, when you have a solid understanding of HTML, teach you to 
write standards-compliant HTML (the most recent version of which is HTML5). This 
has the added benefit that the technical details are more meaningful after you’ve already 
learned the basics. 


It’s also important that you be writing compliant HTML when you start using CSS, so we 
make a point of getting you to standards-based HTML before you begin any serious work 
with CSS. 


We don’t cover every single HTML element or attribute or CSS 
property ever created. 


There are a lot of HTML elements, a lot of attributes, and a lot of CSS properties. Sure, 
they’re all interesting, but our goal was to write a book that weighs less than the person 
reading it, so we don’t cover them all here. Our focus is on the core HTML elements and 
CSS properties that matter to you, the beginner, and making sure that you really, truly, 
deeply understand how and when to use them. In any case, once you’re done with Head 
First HTML and CSS, you'll be able to pick up any reference book and get up to speed 
quickly on all the elements and properties we left out. 


This book advocates a clean separation between the structure of 
your pages and the presentation of your pages. 


Today, serious web pages use HTML to structure their content, and CSS for style and 
presentation. Nineties-era pages often used a different model, one where HTML was used 
for both structure and style. This book teaches you to use HTML for structure and CSS 
for style; we see no reason to teach you outdated bad habits. 


We encourage you to use more than one browser with this book. 


While we teach you to write HTML and CSS that are based on standards, you'll still (and 
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probably always) encounter minor differences in the way web browsers display pages. So, 
we encourage you to pick at least two modern browsers and test your pages using them. 
This will give you experience in seeing the differences among browsers and in creating 
pages that work well in a variety of them. 


We often use tag names for element names. 


Rather than saying “the a element,” or “the ‘a’ element,” we use a tag name, like “the <a> 
element.” While this may not be technically correct (because <a> is an opening tag, not a 
full-blown element), it does make the text more readable, and we usually follow the name 
with the word “element” to avoid confusion. 


The activities are NOT optional. 


The exercises and activities are not add-ons; they’re part of the core content of the book. 
Some of them are to help with memory, some are for understanding, and some will help 
you apply what you’ve learned. Don’t skip the exercises. The crossword puzzles are the 
only things you don’t fave to do, but they’re good for giving your brain a chance to think 
about the words in a different context. 


The redundancy is intentional and important. 


One distinct difference in a Head First book is that we want you to zeally get it. And we want 
you to finish the book remembering what you’ve learned. Most reference books don’t have 
retention and recall as a goal, but this book is about learning, so you'll see some of the same 
concepts come up more than once. 


The examples are as lean as possible. 


Our readers tell us that it’s frustrating to wade through 200 lines of an example looking for 
the two lines they need to understand. Most examples in this book are shown within the 
smallest possible context, so that the part you’re trying to learn is clear and simple. Don’t 
expect all of the examples to be robust, or even complete—they are written specifically for 
learning, and aren’t always fully functional. 


We've placed all the example files on the Web so you can download them. You'll find them 
at http: //wickedlysmart.com/hfhtmlcss/. 


The Brain Power exercises don’t have answers. 
For some of them, there is no right answer, and for others, part of the learning experience 
of the Brain Power activities is for you to decide if and when your answers are right. In 
some of the Brain Power exercises, you will find hints to point you in the right direction. 
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often too formal (or we should just say it, incorrect) punctuation. A shout-out to 
JavaRanch as well for hosting the whole thing. 


A big thanks to Louise Barr, our token web designer, who kept us honest on our 
designs and on our use of HTML and CSS (although you'll have to blame us for 
the actual designs). 


XXXIV intro 


www.it-ebooks.info 


the intro 


Acknowledgments (first edition)* 


{~ Esteemed Reviewer 
David Powers 


Even more technical review: 
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comments, we made significant changes to this book and it is technically twice the 
book it was before. Thank you, David. 
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us well, and to Karen Montgomery for stepping in and bringing life to this book’s 
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seriously, while all the technical faults in this book sit solely with 
the authors (that’s us), we can assure you in every case David 
tried to make sure we did things right. Once again, David was 
instrumental in the writing of this book. 
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team. Joe Konior joined us once again for this edition, along 
with Dawn Griffiths (co-author of Head First C), and Shelley 
Powers (an HTML & CSS “power” house who has been writing 
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Less pink, more HTML £ CSS power! ) 
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thanks to the whole O’Reilly team: Kristen Borg (production editor 
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Safari® Books Online 


Safari® Books Online is an on-demand digital library that lets 
Sa fa ri you easily search over 7,500 technology and creative reference 


Books Ontine books and videos to find the answers you need quickly. 


With a subscription, you can read any page and watch any video from our library 
online. Read books on your cell phone and mobile devices. Access new titles before 
they are available for print, and get exclusive access to manuscripts in development 
and post feedback for the authors. Copy and paste code samples, organize your 
favorites, download chapters, bookmark key sections, create notes, print out pages, 
and benefit from tons of other time-saving features. 


O’Reilly Media has uploaded this book to the Safari Books Online service. To have 
full digital access to this book and others on similar topics from O’Reilly and other 
publishers, sign up for free at http://my.safaribooksonline.com. 
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1 getting to knew HTML 


a 
The Language of the Web * 


Not so fast...to get to 
know me, you've got to 
speak the universal language. 
You know, HTML and CSS. 


The only thing that is standing between you and getting 
yourself on the Web is learning to speak the lingo: 
HyperText Markup Language, or HTML for short. So, get ready for some language 
lessons. After this chapter, not only are you going to understand some basic 
elements of HTML, but you'll also be able to speak HTML with a little style. Heck, 
by the end of this book you'll be talking HTML like you grew up in Webville. 


this is a new chapter 
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html powers the web 
The Web 
Video killed the radio star 


Want to get an idea out there? Sell something? Just need a creative 
outlet? Turn to the Web—we don’t need to tell you it has become 
the universal form of communication. Even better, it’s a form of 
communication YOU can participate in. 


But if you really want to use the Web effectively, you’ve got to 
know a few things about HTML—not to mention, a few things 
about how the Web works too. Let’s take a look from 30,000 feet: 


a put _ files on 

a wed server, any rowser Can 
f ae ie re eit aan ae web pages over 

iles written In eee 

Lanovage (HTML for 

paar peice them on a web 

server (we'll talk about how to 

get Your Liles on a server later 


in the book). | | | 
The Internet aie 


\= _ | 


Web ee 


The HTML in your web page tells the => *\ 
browser what it needs to know to display And there ave a lot of PCs and devices 
your page. And, if you've done Your job connected to the Internet all running, web 


well, your pages will even display well on cell browsers. More importantly, there are 


phones and mobile devices, and work with friends, family, fans, and potential customers 
speech browsers and séreen magni iers for using those devices! 


the visually impaired. 
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What does the web server do? 


Web servers have a full-time job on the Internet, tirelessly waiting for requests from web 
browsers. What kinds of requests? Requests for web pages, images, sounds, or maybe 
even a video. When a server gets a request for any of these resources, the server finds the 
resource, and then sends it back to the browser. 


Brow 
1 wust a computer SES make 
pay re the Internet waitin, requests fo, } TML 
foe requests from browsers: Pages or othe, 

‘Ol sa resources, like images. 

UTML File ‘loup, 
oo” Fh, 
ae %. 


Each server 


toves HTML “Found it, here ya go” 
stores 

files, pictures, Ne 

sounds and other and if the server can 
file types: Web Server locate the resource, it 


sends it to the browser. 


What does the web browser do? 


You already know how a browser works: you’re surfing around the Web and you click on a 
link to visit a page. That click causes your browser to request an HTML page from a web 
server, retrieve it, and display the page in your browser window. 


..and the browser displays 
The Rowse: the HTML page. 


retrieves the Page... ) 


But how does the browser know how to display a page? That’s where HTML comes in. HTML 
tells the browser all about the content and structure of the page. Let’s see how that works... 
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writing some 


What you write (the HTML) 


So, you know HTML 1s the key to getting a browser to display your pages, but 
what exactly does HTML look like? And what does it do? 


Let’s have a look at a littke HTML...imagine you’re going to create a web 
page to advertise the Head First Lounge, a local hangout with some good tunes, 
refreshing elixirs, and wireless access. Here’s what you’d write in HTML: 


<html> 

<head> 
<title>Head First ‘nousgecyeities @ 

</head> 

<body> 
<hl>Welcome to the Head First Lounge</h1> 
<img src="drinks.gif"> © 
<p> 


©) Join us any evening for refreshing elixirs, 


conversation and maybe a game or 
two of <em>Dance Dance reqciieteie usa 


Vireless access is always provided; 


BYOWS (Bring your own web server). 
</p> 
<h2>Di rect ions</h2> © 
<p> 
© You'll find us right in the center of 
downtown Webville. Come join us! 
</p> 
</body> 
</html> 


R ] We don’t expect you to know HTML yet. 


At this point you should just be getting a feel 
for what HTML looks like; we’re going to cover 
everything in detail in a bit. For now, study the HTML and see 
how it gets represented in the browser on the next page. Be sure 
to pay careful attention to each letter annotation and how and 
where it is displayed in the browser. 
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the language of the web 


What the browser creates 


When the browser reads your HTML, it interprets all the éags that 
surround your text. Tags are Just words or characters in angle brackets, 
like <head>, <p>, <h1>, and so on. The tags tell the browser about the 
structure and meaning of your text. So rather than just giving the browser 
a bunch of text, with HTML you can use tags to tell the browser what 
text is in a heading, what text is a paragraph, what text needs to be 
emphasized, or even where images need to be placed. 


Let’s check out how the browser interprets the tags in the 
Head First Lounge: 


Notite how each tag, in 


Yo the HTML maps to what 
Lhe browser displays: 


| 'Wideome to the Head First inna: a ® 


W j 

FS 
r . | © 
i ee ee 


Join us any evening for refreshing elixirs, Gurversetion ated maybe a game of woo! Dance Dance Revelation, 
Wireless access is always provided; BYOWS (Bring your own web server}. 


Directions © 


© You'll find us right in the center of downtown Webville, Come join os! 
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more about 


Q: So HTML is just a bunch of tags 
that | put around my text? 


A: For starters. Remember that HTML 
stands for HyperText Markup Language, so 
HTML gives you a way to “mark up” your text 
with tags that tell the browser how your text 
is structured. But there is also the HyperText 
aspect of HTML, which we'll talk about a little 
later in the book. 


Q: How does the browser decide how 
to display the HTML? 


A: HTML tells your browser about the 
structure of your document: where the 
headings are, where the paragraphs are, 
what text needs emphasis, and so on. Given 
this information, browsers have built-in 
default rules for how to display each of these 
elements. 


But you don’t have to settle for the default 
settings. You can add your own style and 
formatting rules with CSS that determine 
font, colors, size, and a lot of other 
characteristics of your page. We'll get back 
to CSS later in the chapter. 


Be The HTML for the Head First 

Lounge has all kinds of indentation and 
spacing, and yet | don’t see that when it 
is displayed in the browser. How come? 


A: Correct, and good catch. Browsers 
ignore tabs, returns, and most spaces in 
HTML documents. Instead, they rely on 

your markup to determine where line and 
paragraph breaks occur. 


So why did we insert our own formatting if 
the browser is just going to ignore it? To help 
us more easily read the document when 
we're editing the HTML. As your 


thereyareno 
Dumb Questions 


HTML documents become more complicated, 
you'll find a few spaces, returns, and tabs 
here and there really help to improve the 
readability of the HTML. 


Q: So there are two levels of headings, 
<h1> and a subheading <h2>? 


A: Actually there are six, <h1> through 
<h6>, which the browser typically displays in 
successively smaller font sizes. Unless you 
are creating a complex and large document, 
you typically won't use headings beyond 
<h3>. 


Q: Why do | need the <html> tag? Isn't 
it obvious this is an HTML document? 


A: The <html> tag tells the browser your 
document is actually HTML. While some 
browsers will forgive you if you omit it, some 
won't, and as we move toward “industrial- 
strength HTML” later in the book, you'll see it 
is quite important to include this tag. 


Q: What makes a file an HTML file? 


A: An HTML file is a simple text file. 
Unlike a word processing file, there is 

no special formatting embedded in it. By 
convention, we add an “.html” to the end of 
the filename to give the operating system a 
better idea of what the file is. But, as you've 
seen, what really matters is what we put 
inside the file. 


Q: Everyone is talking about HTML5. 
Are we using it? If so, why aren’t we 
saying “HTML-FIVE” instead of “HTML”? 


A: You're learning about HTML, and 
HTML just happens to be the latest version 
of HTML. HTML5 has had a lot of attention 
recently, and that’s because it simplifies 
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many of the ways we write HTML and 
enables some new functionality, which 
we're going to cover in this book. It also 
provides some advanced features through 
its JavaScript application programming 
interfaces (APIs), and those are covered in 
Head First HTML5 Programming. 


Q: Markup seems silly. What-you-see- 
is-what-you-get applications have been 
around since, what, the 70s? Why isn’t 
the Web based on a format like Microsoft 
Word or a similar application? 


A: The Web is created out of text files 
without any special formatting characters. 
This enables any browser in any part of the 
world to retrieve a web page and understand 
its contents. There are WYSIWYG 
applications out there like Dreamweaver, 
and they work great. But in this book we're 
going to take it down to the bare metal, and 
start with text. Then you’re in good shape 
to understand what your Dreamweaver 
application is doing behind the scenes. 


Q: Is there any way to put comments 
to myself in HTML? 


A: Yes, if you place your comments in 
between <!-- and --> the browser will totally 
ignore them. Say you wanted to write a 
comment “Here's the beginning of the lounge 
content.” You'd do that like this: 


<!-- Here's the beginning of 
the lounge content --> 


Notice that you can put comments on 
multiple lines. Keep in mind anything you put 
between the “<!--” and the “-->”, even HTML, 
will be ignored by the browser. 


the language of the web 


nye yo pa 
a You're closer to learning HTML than you think... 


Here’s the HTML for the Head First Lounge again. Take a look at the tags and see 
if you can guess what they tell the browser about the content. Write your answers 
in the space on the right; we’ve already done the first couple for you. 


<html> Tells the browser this is the start of HTML. 


<head> 


<title>Head First Lounge</title> 0 ilcccceeetteteeetttetteeeeeeen 
</head> 
<body> 


<hl>Welcome to the Head First Lounge</h1> 


<img src="drinks.gif"> 


<p> 


Join us any evening for refreshing elixirs, 
conversation and maybe a game or 
two of <em>Dance Dance Revolution</em>. 


Wireless access is always provided; 


BYOWS (Bring your own web server). 
</p> 
<h2>Directions</h2> 


<p> 


You'll find us right in the center of 


downtown Webville. Come join us! 
</p> 
</body> 
</html> 
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what the markup does 


<html> Tells the browser this is the start of HTML. 


<head> 
<title>Head First Lounge</title> 
</head> 
<body> 
<hi>Welcome to the Head First Lounge</h1> 
<img src="drinks.gif"> 
<p> 
Join us any evening for refreshing elixirs, 
conversation and maybe a game or 
two of <em>Dance Dance Revolution</em>. 


Wireless access is always provided; 


BYOWS (Bring your own web server). 


</p> 
<h2>Directions</h2> 
<p> 
You'll find us right in the center of 


downtown Webville. Come join us! 


</p> 
</body> 


</html> Tells the browser this is the end of 
the HTML. 
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Your big break at Starbuzz Coffee 


Starbuzz Coffee has made a name for itself as the fastest 
growing coffee shop around. If you’ve seen one on your local 
corner, look across the street—you’ll see another one. 


In fact, they’ve grown so quickly, they haven’t even managed 
to put up a web page yet...and therein lies your big break: By 
chance, while buying your Starbuzz Chai Tea, you run into 
the Starbuzz CEO... 


Word has it you 
know a little about HTML. 

We really need a web page 
that features the Starbuzz 
offerings. Can you help? 


The Starbuzz CEO 


BOR: WAL 
‘PS wv ER Decisions, decisions. 
Check your first priority below (choose only one): 


[|] A. Give dog a bath. C. Take the Starbuzz gig and 


launch BIG-TIME web career. 


[ ] B. Finally get my checking 
account balanced. D. Schedule dentist appointment. 
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what goes on the starbuzz page 


Wonderful! We're so 
glad you'll be helping us. * 
Here's what we need on 
our first page... 


Thanks for giving us a hand! 

On the web page We just eon 
somethin, simple (see below 2 
antludes the beverage names, peicesy 
and destriptions- 


something E ko You | ea ee of coffees from Mexico, Bolivia 
smooth, m! 


and Guatemala. nee 


Motha Cafe Latte, 41.39 


Espresso steamed milk and chocolate syrvy- -_ 


sno, 71:84 
| Cappuccino, 4 
| es uf ature of espressor 


} 


steamed milk and foam. 


+ Tea, 71-89 a Se 
cee, made with black tea» spices milk and honey 
‘ sPl 


Take a look at the napkin. Can you 
determine the structure of it? In other 
words, are there obvious headings? 
Paragraphs? Is it missing anything like a 
title? 


Go ahead and mark up the napkin (using 
your pencil) with any structure you see, 
and add anything that is missing. 


You'll find our answers at the end of 
Chapter 1. 


* |£ by chance you chose option A, B, or D on the previous 
page, we recommend You donate this book to a good library, 
use it as kindling this winter, or what the heck, 90 ahead 
and sell it on Amazon and make some cash. 
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Creating the Starbuzz web page 


Of course, the only problem with all this is that 
you haven’t actually created any web pages yet. 
But that’s why you decided to dive head first into 
HTML, right? 


No worries, here’s what you’re going to do on 
the next few pages: 


e Create an HTML file using your favorite 
text editor. 


Type in the menu the Starbuzz CEO wrote 
on the napkin. 


2) 
@ Save the file as “index.htmI”. 
4) 


Open the file “index.html” in your favorite browser, 
step back, and watch the magic happen. 


No pressure, but thousands of 

people are going to visit this web 
page when you're finished. It not only 
needs to be correct, it’s gotta look 
great, too! 
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writing html on a macintosh 


Creating an HTML file (Mac) 


All HTML files are text files. To create a text file, you 
need an application that allows you to create plain text 
without throwing in a lot of fancy formatting and special 


characters. You just need plain, pure text. Hew Fiscier Whincrew 


We'll use TextEdit on the Mac in this book; however, if 
you prefer another text editor, that should work fine as 
well. And, if you’re running Windows, you'll want to skip 
ahead a couple of pages to the Windows instructions. 


Step one: 
Navigate to your Applications folder 
The TextEdit application is in the Applications 
folder. The easiest way to get there is to 
choose New Finder Window from the Finder’ 
File menu and then look for the Application pe Pome a 


directly in your shortcuts. When you’ve found loom ri Fesion 
it, click on Applications. | i sinstes 
—_ ee 
| is) a | mes eas 
Step two: ey 3 
Locate and run TextEdit Sheet fii ie: 
You'll probably have lots of applications listed Here’s TextEdit. 
in your Applications folder, so scroll down until —_ lacie 
you see TextEdit. To run the application, ™ = 
double-click on the TextEdit icon. Your Finder 
shorteuts 


Step three (optional): 
Keep TextEdit in your Dock asta 


If you want to make your life easier, 
click and hold on the TextEdit icon in 
the Dock (this icon appears once the 
application is running). When it displays 
a pop-up menu, choose Options, then 

“Keep in Dock.” That way, the TextEdit 
icon will always appear in your Dock 
and you won’t have to hunt it down in 
the Applications folder every time you 
need to use it. 
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a Keep if Ooetk 
1-dE Loe 


in Finger 


GO fet view Go Widest Hele 


the language of the web 


Step four: 


Change your TextEdit Preferences 


By default, TextEdit is in “rich text” 
mode, which means it will add its own 
formatting and special characters 

to your file when you save it—not 


what you want. So, you’ll need to C 

change your TextEdit Preferences so This text formatting nen 
that TextEdit saves your work as a means you're in “rich tex 4” 
pure text file. To do this, first choose mode. |f You see these, 

the Preferences menu item from the you need to change your 


TextEdit menu. Preterences. 


Step five: 


Set Preferences for Plain text 


Once you see the Preferences dialog 
box, there are three things you need 


to do. = a ee et et ae ee me 
ae 


sf ce * 2 1A Ce ete 6 Ce egy Se SR Tey, | huestes fctparaerie tity 
First, choose “Plain text” as the Fide shrsnant LR EH a: 


default editor mode in the New a icc 


ee les 
ah Os eve ed ml le, 
he bee ere se es ere Be 


Document tab. 


In the “Open and Save” tab, make 
sure “Ignore rich text commands in 
HTML files” is checked. 


ee Oe sates) |b: 
ge nal 


Last, make sure that the “Add .txt 
extension to plain text files” is 
unchecked. 


That’s it; to close the dialog box, 
click on the red button in the top- 
left corner. ae SSECERTEE SIRES 


Step six: 
Quit and restart 


Now quit out of TextEdit by choosing 
Quit from the TextEdit menu, and then 


restart the application. This time, you'll See, the formatting menu 
see a window with no fancy text formatting aera that means we're 
menus at the top. You’re now ready to create in text mode. 

some HTML. 
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writing html on windows 


Creating an HTML file (Windows) 


If you’re reading this page you must be a Windows 7 user. If you’re not, 
you might want to skip a couple of pages ahead. Or, if you just want to sit 
in the back and not ask questions, we’re okay with that too. 


Ov another version of Windows 


To create HTML files in Windows 7, we’re going to use Notepad—it ships if ove usind another , 
with every copy of Windows, the price is right, and it’s easy to use. If Bs on of Windows, You \ 
you've got your own favorite editor that runs on Windows 7, that’s fine too; rs i Notepad there as we \. 
just make sure you can create a plain-text file with an “.html” extension. = 


Assuming you’re using Notepad, here’s how you’re going to create your 
first HTML file. 


Step one: 
Open the Start menu and navigate to Notepad. 


You'll find the Notepad application in Accessories. The 
easiest way to get there is to click on the Start menu, then 
on All Programs, then Accessories. You'll see Notepad 
listed there. 
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Step two: 


Open Notepad. i aw 


Once you’ve located Notepad in the 
Accessories folder, go ahead and click on 
it. You'll see a blank window ready for 


you to start typing HTML. 
eet A T'* 
But - a r ; ee ee et. | 
ee Daa eee 
Step three (optional): ed SS RE ESTE IEA ANAT a 
Don't hide extensions of clin =e. 
well-known file types. epee eet aogae eae a co 
Bb ae, EL nate a ee - a ee e ~ 
By default, Windows File Explorer hides the | fleece ocr Gr 
y Pp / eta rr 


file extensions of well-known file types. For 
example, a file named “Irule.html” will be 


shown in the Explorer as “Irule” without its 


“html” extension. “Foti ee =) 


ern Liam) ee |e 
It’s much less confusing if Windows shows you see a ‘ 
these extensions, so let’s change your folder Weiser apghy eves Guch aa Dalal ar lcore- thet | 
. (0) you erg ber theodore a ke oT ee 
options so you can see them. | E Sie ae 
First, open Folder Options by clicking the 
Start button, clicking Control Panel, clicking  étread mati 
“Appearance and Personalization,” and then ” ae = eee smirecibuciieall * 
clicking Folder Options. Meas thar rear | 
fa) Cer Ske ecco oe Beunbrese | 
5 uy G EF] Cempiny iceranioe ir: | 
Next, in the View tab, under “Advanced Bo ota a mace sate th Hepsi 
settings,” scroll down until you see “Hide 4a Hicdons hl ered Fabcbore 
: as ‘ (i) Gori che hedcien filam, tootdern, or cere 
extensions for known file types” and uncheck this ‘hao Fe Bes, nr, pred reg 
= > eee 
ae . | Hie oriscted meeting ements (Recomended) 
That’s it. Click on the OK button to save ~ - 
the preference and you'll now see the file _ Pans Dekada | 
extensions in the Explorer. == or = 
Mace es Naeem) [aauieeiay 
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b Questions 


pum 


Q: Why am | using a simple text editor? 
Aren’t there powerful tools like Dreamweaver 
and Expression Web for creating web pages? 


A: You're reading this book because you want 
to understand the true technologies used for web 
pages, right? Now those are all great tools, but 
they do a lot of the work for you, and until you 
are a master of HTML and CSS, you want to learn 
this stuff without a big tool getting in your way. 


Once you're a master, however, these tools do 
provide some nice features like syntax checking 
and previews. At that point, when you view the 
“code” window, you'll understand everything in it, 
and you'll find that changes to the raw HTML and 
CSS are often a lot faster than going through a 
user interface. You'll also find that as standards 
change, these tools aren't always updated right 
away and may not support the most recent 
standards until their next release cycle. Since 
you'll know how to change the HTML and CSS 
without the tool, you'll be able to keep up with the 
latest and greatest all the time. 


There are many more fully featured editors that 
include great features like clips (for automatically 
inserting bits of HTML you write often), preview 
(for previewing directly in the editor before you 
test in the browser), syntax coloring (so tags are 
a different color from content), and much more. 
Once you get the hang of writing basic HTML and 
CSS in a simple editor, it may be worth checking 
out one of the fancier editors, such as Coda, 
TextMate, CoffeeCup, or Aptana Studio. There 
are many out there to choose from (both free and 
not). 


Q: | get the editor, but what browser am | 
supposed to be using? There are so many— 
Internet Explorer, Chrome, Firefox, Opera, 
Safari—what’s the deal? 


: The simple answer: use whatever browser 
you like. HTML and CSS are industry standards, 
which means that all browsers try to support 
HTML and CSS in the same way (just make sure 
you are using the newest version of the browser 
for the best support). 


The complex answer: in reality there are slight 
differences in the way browsers handle your 
pages. If you've got users who will be accessing 
your pages in a variety of browsers, then always 
test your web page in several different browsers. 
Some pages will look exactly the same; some 
won't. The more advanced you become 

with HTML and CSS, the more these slight 
differences may matter to you, and we'll get into 
some of these subtleties throughout the book. 


Any of the major browsers—Internet Explorer, 
Chrome, Firefox, Opera, and Safari—will work 
for most examples (except where noted); they 
are all modern browsers with great HTML and 
CSS support. And as a web developer, you'll 

be expected to test your code in more than one 
browser, so we encourage you to download and 
get familiar with at least two! 


Q: I’m creating these files on my own 
computer—how am | going to view these on 
the Web? 


A: That’s one great thing about HTML: you 
can create files and test them on your own 
computer and then later publish them on the 
Web. Right now, we’re going to worry about how 
to create the files and what goes in them. We'll 
come back to getting them on the Web a bit later. 
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Meanwhile, back at Starbuzz Coffee... 


the language of the web 


Okay, now that you know the basics of creating a plain-text file, you just 
need to get some content into your text editor, save it, and then load it into 


your browser. 


Start by typing in the beverages straight from the CEO’s napkin; these 
beverages are the content for your page. You'll be adding some HTML 
markup to give the content some structure in a bit, but for now, just get 
the basic content typed in. While you’re at it, go ahead and add “Starbuzz 
Coffee Beverages” at the top of the file. 


Mae 


Type in the info from 
rm napkin like this. 


el 
(Starbuz2 coffee peverages 5 
House Blend, 51.49 

oécsmocth, mild blend of coffees from Mexico, @olivia and Guatemala, 


pMocha Cafe batta, $7.35 
CEspresso, steared milk and chocolate syrup. 


cappeccino, $4.80 ; 
JA mixture of espresao, sveemed milk and foam 


(chai Twa, $2.85 
CA sedcy drink made wich black cea, sptees, milk and homey] 


86 8 Untitled oct 


= — 


| Storbuce Coffes Beverages “i 


House Elerd, $1.49 
& zwpokh, wild blend of coffeee Foo Pecioco, Bolivia end Guoteeola, \ 


Poche Cofe Labbe, $2.35 Windows 
Espresso, sheaned ilk ond chocolobs syrup. 


Cappuesine, fle 
& misbure of espresso, steomed milk and foo. 


Choi Tea, 1.85 
& spboy drink made with block tego, splces, milk ond honey, 
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saving your htm! 


Saving your work 


Once you've typed in the beverages from the CEO’s napkin, you’re going to 
save your work in a file called “index.html”. Before you do that, you’ll want to 
create a folder named “starbuzz” to hold the site’s files. 


To get this all started, choose Save from the File menu and you'll see a Save As 
dialog box. Then, here’s what you need to do: 


Click here to : 
First, create a “starbuzz" folder treate a new folder: Hae 
~ forall your Starbuzz-related RY 
files. You can do this with the 
New Folder button. 


= weeaurieeirts ihraty 


aes ees 


et] im resua 


kientod | Ie 


C? Rede 1 
: z | When you save, make sure UTF-8@ Don't worry about 
Ma ame ri is selected for the entoding on UTF-8 for now; 
en ae <= | both Mae and Windows. we'll come back to 
peti | | a, that later. 


st Wes roma sha A Dra a De 


LiWalp entry Mew Faller | (toe | ey 
eae (\ Cs ——. -— a 
Create a new Click to save- oe — ceca eee 
folder here. eae oe 
Next, click on the newly created 
“starbuzz" folder and then enter 
“index.html” as the filename and click 
on the Save button. | 
Gra Gaal 
b—f = 
Click to save. 
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Opening your web page in a browser 


Are you ready to open your first web page? Using your 
favorite browser, choose “Open File...” (or “Open...” 
using Windows 7 and Internet Explorer) from the File 
menu and navigate to your “index.html” file. Select it 

and click Open. 


3 ‘Daeg peeyencagt tt 
= epee docu. 


ie 


ih nweanecn —— 


Then click Browse to get a 
browse dialog, and — to 


where you saved your ile. 
u NL) 
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a two—ste 


+ = myer peel r opr : z 
ram 


et 


the language of the web 


On the Mae, navigate to your 
file, and select it by clicking, 

on the file iton and then on 

the Open button. 


a In Windows Internet Explorer it’s 
P process. First, you'll 
get the Open dialog box. 


Lio = 


(ey aed ee Vad 
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testing your him! 


Take your page for a 
test drive qm=ss 


Success! You’ve got the page loaded in 
the browser, although the results are 

a little...uh...unsatisfying. But that’s 

just because all you’ve done so far 1s go 
through the mechanics of creating a page 
and viewing it in the browser. And so 

far, you’ve only typed in the content of the 
web page. That’s where HTML comes 
in. HTML gives you a way to tell the 
browser about the structure of your page. 
What’s structure? As you’ve already seen, 
it is a way of marking up your text so 
that the browser knows what’s a heading, 
what text is in a paragraph, what text is a 
subheading, and so on. Once the browser 
knows a little about the structure, it can 
display your page in a more meaningful 
and readable manner. 


Windows 


J 


Co. aC Aras forums Liane a ant aa og = ie 


ee eee | 


Soares oie Plreoengery Heese Me 10 Uy eee, nad beret od ote tee Viren, fee 
mel) Comics. icici. Coie Larne, E03 leapt, ee ec ed laced ie. Cg pice 
Gee ee ey oper, Ard ease nate bab 
Fed apes ati veel ees 


"LA tong 


Pe Eo ee ee 


Sane Cotter Beet po Aone Ble. 41a et, i Sine of cece fen 
Mist Bool aod nals, Sleehea Cote Lame. 2005 Bape tend od 
OH cheediae. peu Capen, 5 A ple ol eee, ed ek ed 
frau. Chee Tite, SE A epee aie mde eli heck ioe, epioce mit ond boy 
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Depending on your operating system and 
browser, often you can just double-click 
the HTML file or drag it on top of the 
browser icon to open it. Much simpler. 
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the language of the 


= Markup Plagiets 
So, let’s add that structure.. 


Your job is to add structure to the text from the Starbuzz napkin. Use 
the fridge magnets at the bottom of the page to mark up the text 

so that you've indicated which parts are headings, subheadings and 
paragraph text. We've already done a few to get you started. You won't 
need all the magnets below to complete the job; some will be left over. 


[<n1> |stazpuze Coffee Beverages 


House Blend, $1.49 


A smooth, mild blend of coffees from Mexico, Bolivia and 
Guatemala. 


[ <n2>_\wocha Cafe Latte, $2.35 | </h2> | | </n2> | 
| <p> | spresso, steamed milk and chocolate syrup. [<r } 


Cappuccino, $1.89 


A mixture of espresso, steamed milk and foam. 


Chai Tea, $1.85 


A spicy drink made with black tea, spices, milk and honey. 


Besa Jes 3 o =) Se oo, 


Use C magnet 


web 


to start a Use nN magnet Use \ ise thee a 
heading, Use this = Use C magnet to end a magnet to to ‘nd : = 
to end a heading, = 4, start a subheading. start a paragraph. 
subheading, paragraph: 
21 
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your first html markup 


Congratulations, 
you've just written 
your first HTML! 


They might have looked like fridge 
magnets, but you were really marking up 
your text with HTML. Only, as you know, 


we usually refer to the magnets as fags. 
Check out the markup below and compare it to 
your magnets on the previous page. 


to mark 
he <hl> and </i> tas 
ae All the text in between is the 
actual content of the heading, 


<hi>Starbuzz Coffee Beverages</h1> 


ZADSHouse Blend, $1.49@fMOS) Sm The <h2> and </h2> tags 
90 around a subheading, 
Think of an <h2> heading 
as a subheading of an <hl> 
heading. 


<p>A smooth, mild blend of coffees from Mexico, Bolivia 
and Guatemala.</p> 


<h2>Mocha Cafe Latte, $2.35</h2> 


<p>Espresso, steamed milk and chocolate syrup.</p> 
The <p> and </p> tags 


<h2>Cappuccino, $1.89</h2> 9° around a block of 
text that is a paragraph 
<p>A mixture of espresso, steamed milk and foam.</p> That can be ph. 
one or man 
sentences. Y 


<h2>Chai Tea, $1.85</h2> 


<p>A spicy drink made with black tea, spices, milk and 
honey .</p> 


Ree “ 
Notiee that you don’t have to put matching tags 


on the same line. aa 
you like between them. n Put as much content as 
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Are we there yet? 


You have an HTML file with markup—does that make a web page? Almost. 
You've already seen the <html>, <head>, <title>, and <body> tags, and 
we just need to add those to make this a first-class HTML page... 


Next add chead> and </ head> tags: The 


: TML 
Se shad ya : head contains anformation about your web 


with <html> é </html> 


: think about it ad and 
Laas. This tells the browser joe, like its title: For now, ell the Go ahe 
3 ar page d allows you to te inside the 
the content of the file is pis way the head 3 leh Vee 
things abou 
HTML. » browser Qs doe af the 
<html> 
<head> 
<title>Starbuzz Coffee</title> & </head> tags 
</head> in between. 
<body> 
<hl>Starbuzz Coffee Beverages</h1> 
<h2>House Blend, $1.49</h2> 
<p>A smooth, mild blend of coffees from Mexico, 
Bolivia and Guatemala.</p> 
<h2>Mocha Cafe Latte, $2.35</h2> 
<p>Espresso, steamed milk and chocolate syrup.</p> 
<h2>Cappuccino, $1.89</h2> 
<p>A mixture of espresso, steamed milk and foam.</p> 
<h2>Chai Tea, $1.85</h2> 
<p>A spicy drink made with black tea, spices, 
milk and honey.</p> 
</body> 
</html> Keep your head 


and body separate 
The body contains all the bantent and when writing HTML. 
structure of your web page—the parts of 


the web page that you see in your browser. 
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put - title 
head. The title 


usually appears at the toP 


browser window: 


The head consists of the <head> 


and everything 


The body consists 
of the <body> 

é </ body> tags 
and everything in 
between. 


you are here > 
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another test with some markup 


Another test drive @=g= 


Go ahead and change your “index.html” file by adding 
in the <head>, </head>, <title>, </title>, <body> and 
</body> tags. Once you’ve done that, save your 


changes and reload the file into your browser. 


Notice that ais title, 
which you speci ied in 
You can reload the index-htral file by the <head> element, 
selecting the Open File menu item again, or shows up here. 
by using your browser’s reload button. 


Now things look a bit better. 


The browser has interpreted 
your taos and treated a 
display for the page that 

is not only more structured, 
but also more readable. 


24 Chapter 1 


Sukie! Sisrburs Coffee 


tae b a } ] © Alec (Schepens L ter ine bared 


| Starbuzz Coffee Beverages 


Howse Blend, $1.45 
A, anoo, (ld bend of coffees from Mishoo, Bolivia aod Seem 
Mocha Cafe Latte, $2.35 


Expos ated el od Chee re. 


Cappuccinn, $149 


Amnon nl cape, acme oudk aod (rare. 


Chai Tea, $185 


A eee deo aes @ oh black wa, eps, mk are! bose 
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Tags dissected 


Okay, you’ve seen a bit of markup, so let’s zoom in 
and take a look at how tags really work. 


You usually put tags a 


round some piece of content. 
. i hat our 
tt e’ve using tags to tell the browser {) 
eee se Coffee Beverages, is a top- 
level heading, (that is, heading level one). 


Here’s the opening tag 
that begins the heading. 


alt ee 


<h1> Starbuzz Coffee Beverages </h1> 


Tags consist of the ta unt . 
Ban be seb cna enclosing tags and the content in between. 
that is, the < an 


To tell the browser about the structure of your 
page, use pairs of tags around your content. 


Remember: 


Element = Opening Tag + Content + Closing Tag 
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The whole shebang is called an element. In this case, we 
tan Call it the <hl> element. An element consists of the 
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the language of the web 


This is the closing tag, 
that ends the heading; 
an this case the : : 
as ending an < > 
a oS know it's 
3 Closing ta9, because 
it Comes after the 
content, and it's got a 


“7” before the “hl”. Al 


closing, tags have a / 
in them. 


~\ 


We tall an opening tag 
and its Closing, tag 
matching tags: 
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elements and 


Q: So matching tags don’t have to be 
on the same line? 


A: No; remember the browser doesn’t 
really care about tabs, returns, and most 
spaces. So, your tags can start and end 
anywhere on the same line, or they can start 
and end on different lines. Just make sure 
you start with an opening tag, like <h2>, and 
end with a closing tag, like </h2>. 


Q: Why do the closing tags have that 
extra “/”? 


A: That “/” in the closing tag is to help 
both you and the browser know where a 
particular piece of structured content ends. 
Otherwise, the closing tags would look just 
like the opening tags, right? 


ie BRAUN 
-PQWwER 


thereyareno 
Dumb Questions 


A). I’ve noticed the HTML in some 
pages doesn’t always match opening tags 
with closing tags. 


A: Well, the tags are supposed to match. 
In general, browsers do a pretty good job 

of figuring out what you mean if you write 
incorrect HTML. But, as you’re going to see, 
these days there are big benefits to writing 
totally correct HTML. If you're worried you'll 
never be able to write perfect HTML, don’t 
be; there are plenty of tools to verify your 
code before you put it on a web server so 
the whole world can see it. For now, just get 
in the habit of always matching your opening 
tags with closing tags. 


Q: Well, what about that <img 
src=“drinks.gif’> tag in the lounge 
example? Did you forget the closing tag? 


A: Wow, sharp eye. There are some 
elements that use a shorthand notation with 
only one tag. Keep that in the back of your 
mind for now, and we'll come back to it ina 
later chapter. 


Q: An element is an opening tag + 
content + closing tag, but can’t you have 
tags inside other tags? Like the <head> 
and <body> are inside an <html> tag? 


A: Yes, HTML tags are often “nested” 
like that. If you think about it, it’s natural 
for an HTML page to have a body, which 
contains a paragraph, and so on. So many 
HTML elements have other HTML elements 
between their tags. We'll take a good look 
at this kind of thing in later chapters, but 
for now just get your mind noticing how the 
elements relate to each other in a page. 


Tags can be alittle more interesting than what you’ve seen so far. Here’s the 
paragraph tag with a little extra added to it. What do you think this does? 


<p id="houseblend">A smooth, mild 


blend of coffees from Mexico, Bolivia 
and Guatemala.</p> 
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the language of the web 


Oh,I forgot to mention, 
we need our company mission 
on a page, too. Grab the mission 
statement off one of our coffee 

cups and create another page 
for it... 


SigrbuZz Coffee 5 -~ 
Mission | 


To provide all the 
caffeine that you 
need to power your 
life. 


Just drink it. 


eAA mission.html 


Write the HTML for the new 
“mission.html” page here. 


2] Type in your HTML using a text 
editor, and save it as “mission. 
html’ in the same folder as your 

“index.html” file. 


@ Once you've done that, open 
“mission.html” in your browser. 


4) Check your work at the end of 
the chapter before moving on... 
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using css for style 


Okay, it looks like you're 
getting somewhere. You've got the 
main page and the mission page all set. 
But don't forget the CEO said the site 
needs to look great too. Don't you think 
it needs a little style? 


Right. We have the 
structure down, so now 
we’re going to concentrate 
on its presentation. 


You already know that HTML gives 
you a way to describe the structure 

of the content in your files. When the 
browser displays your HTML, it uses 
its own built-in default style to present 
this structure. But relying on the 
browser for style obviously isn’t going 
to win you any “designer of the month” 


awards. 

That’s where CSS comes in. CSS = 

gives you a way to describe how your 

content should be presented. Let’s get CSS is an abbreviati 

our feet wet by creating some CSS that or Caseading St ‘a 

makes the Starbuzz page look a little Sheets. We’l] get : eo 

more presentable (and launch your what that all m ais 

web career in the process). later, but for send 
just know that C66 
gives You a way to 
i the browser how 
elements in your pa 
should look. pve 
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Meet the style element 


To add style, you add a new (say it with us) E-L-E-M-E-N-T 


to your page—the <style> element. Let’s go back to the 
main Starbuzz page and add some style. Check it out... The <style> elem 


<html> 


ent is placed inside the 
head of your HTML. 


Just like other elements, the <style> 
element has an opening tag, <style>, 


and a losing tag, </ style>. 
<title>Starbuzz Coffee</title> 


<style type="text/css"> <—/ The <style> tag also has an (optional) 
attribute, called type, which tells the 
3 browser the kind of style you're using. 
</style> Because you're going to use CSS, You Can 
e/heaa> specify the “text/ess” type. 


And here’s where you're 
wns to define the styles 
or the page. 


<hl>Starbuzz Coffee Beverages</h1> 


<h2>House Blend, $1.49</h2> 


<p>A smooth, mild blend of coffees from Mexico, Bolivia and 
Guatemala.</p> 


<h2>Mocha Caffe Latte, $2.35</h2> 
<p>Espresso, steamed milk and chocolate syrup.</p> 


<h2>Cappuccino, $1.89</h2> 
<p>A mixture of espresso, steamed milk and milk foam.</p> 


<h2>Chai Tea, $1.85</h2> 
<p>A spicy drink made with black tea, spices, milk and honey.</p> 


</body> 
</html> 
sea no) 
Dumb Questions 
Q: An element can have an “attribute”? What does that Q: Why do I have to specify the type of the style (“text/css”) 
mean? as an attribute of the style? Are there other kinds of style? 
A: Attributes give you a way to provide additional information A: At one time the designers of HTML thought there would be 
about an element. Like, if you have a <style> element, the attribute other styles, but as it turns out we've all come to our senses since 
allows you to say exactly what kind of style you're talking about. then and you can just use <style> without an attribute—all the 
You'll be seeing a lot more attributes for various elements; just browsers will know you mean CSS. We're disappointed; we were 
remember they give you some extra info about the element. holding our breath for the <style type=“50sKitsch”> style. Oh well. 
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adding a style element 


Giving Starbuzz some style... 


Now that you've got a <style> element in the HTML head, all you need to 
do is supply some CSS to give the page a little pizzazz. Below you'll find some 
CSS already “baked” for you. Whenever you see the & ag logo, you’re 
seeing HTML and CSS that you should type in as-is. Trust us. You'll learn how 
the markup works later, after you’ve seen what it can do. 


So, take a look at the CSS and then add it to your “index.html” file. Once 
you've got it typed in, save your file. 


(= =\ Reapy Bake 
<html> } C59 
<head> 
<title>Starbuzz Coffee</title> 
<style type="text/css"> 
body { 
background-color: #d2b48c; 
margin-left: 20%; 
margin-right: 20%; 
border: 2px dotted black; that 
padding: 10px 10px 10px 10px; CSS wacs 3 stan 
font-family: sans-serif; is totally dirreren 
} from HTML. 
</style> 
</head> 
<body> 
<hl>Starbuzz Coffee Beverages</h1> 
<h2>House Blend, $1.49</h2> 
<p>A smooth, mild blend of coffees from Mexico, Bolivia and 
Guatemala .</p> 
<h2>Mocha Caffe Latte, $2.35</h2> 
<p>Espresso, steamed milk and chocolate syrup.</p> 
<h2>Cappuccino, $1.89</h2> 
<p>A mixture of espresso, steamed milk and milk foam.</p> 
<h2>Chai Tea, $1.85</h2> 
<p>A spicy drink made with black tea, spices, milk and honey.</p> 
</body> 
</html> 
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the language of the web 


Cruisin’ with style... et 


It’s time for another test drive, so reload your “index.html” file again. 
This time, you'll see the Starbuzz web page has a whole new look. 


Background Color is now tan. 


Now we have margins 
around the content: 


We've got a black dotted border 
around the content. 


There's now some 
padding, between the 
content and the border 
(on all sides). 


We've using a 
different font for 


a Cleaner look. 


If you're using IE, 
you might not see 
the border. 


Whoa! Very nice. We're 


in business now! 
Internet Explorer 


does not display the 
border around the body correctly. 
Try loading the page in Firefox, 
Chrome or Safari to see the border. 


Wateh it! 
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at css 


looking 


+ J 


+ 
“WHO DOES wHarT? 


Even though you've just glanced at CSS, you’ve already begun to see 
what it can do. Match each line in the style definition to what it does. 


background-color: #d2b48c; 


margin-left: 20%; 


margin-right: 20%; 


border: 2px dotted black; 


padding: 10px 10px 10px 10px; 


font-family: 


Q: CSS looks like a totally different 
language than HTML. Why have two 
languages? That’s just more for me to 
learn, right? 


A: You are quite right that HTML and 
CSS are completely different languages, 

but that is because they have very different 
jobs. Just like you wouldn't use English to 
balance your checkbook, or math to write a 
poem, you don’t use CSS to create structure 
or HTML to create style because that’s not 
what they were designed for. While this does 
mean you need to learn two languages, 
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sans-serif; 


Defines the font to use for text. 


Defines a border around the body that is 
dotted and the color black. 


Sets the left and right margins te take up 
20% of the page each. 


Sets the background color to tan. 


Creates some padding around the body of 
the page. 


thereyareno 
Dumb Questions 


you'll discover that because each language 
is good at what it does, this is actually easier 
than if you had to use one language to do 
both jobs. 


Q: #d2b48c doesn’t look like a color. 
How is #d2b48c the color “tan”? 


A: There are a few different ways to 
specify colors with CSS. The most popular is 
called a “hex code,” which is what #d2b48c 
is. This really is a tan color. For now, just go 
with it, and we'll be showing you exactly how 
#d2b48c is a color a little later. 
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A Why is there a “body” in front of 
the CSS rules? What does that mean? 


A: The “body” in the CSS means that all 
the CSS between the “{” and “}” applies to 
content within the HTML <body> element. So 
when you set the font to sans-serif, you're 
saying that the default font within the body of 
your page should be sans-serif. 


We'll go into a lot more detail about how 
CSS works shortly, so keep reading. Soon, 
you'll see that you can be a lot more specific 
about how you apply these rules, and by 
doing so, you can create some pretty cool 
designs. 


the language of the web 


-. Now that you’ve put a little style in the Starbuzz “index.html” page, go ahead and 
Exercise update your “mission.html’ page to have the same style. 


1) Write the HTML for the “mission.html” page below, and then 
add the new CSS. 


(2) Update your “mission.html” file to include the new CSS. 
© Once you've done that, reload “mission.htm|” in your browser. 


4.) Make sure your mission page looks like ours at the end of the 
chapter. 


ea AeA mission.html 
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content and style 


Fireside Chats 


HTML 


Greetings, CSS; Pm glad you’re here because I’ve 
been wanting to clear up some confusion about us. 


Lots of people think that my tags tell the browsers 
how to display the content. It’s just not true! I’m all 
about structure, not presentation. 


Well, you can see how some people might get 
confused; after all, it’s possible to use HTML 
without CSS and still get a decent-looking page. 


Hey, I’m pretty powerful too. Having your content 
structured is much more important than having it 
look good. Style is so superficial; it’s the structure of 
the content that matters. 


Whoa, what an ego! Well, I guess I shouldn’t expect 
anything else from you—you’re just trying to make 
a fashion statement with all that style you keep 
talking about. 
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Tonight’s talk: HTML and CSS on content and style 


CSS 


Really? What kind of confusion? 


Heck yeah—I don’t want people giving you credit 
for my work! 


“Decent” might be overstating it a bit, don’t you 
think? I mean, the way most browsers display 
straight HTML looks kinda crappy. People need 
to learn how powerful CSS is and how easily I can 
give their web pages great style. 


Get real! Without me, web pages would be pretty 
damn boring, Not only that, but take away the 
ability to style pages and no one is going to take 
your pages seriously. Everything is going to look 
clumsy and unprofessional. 
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HTML 


Right. In fact, we’re totally different languages, 
which is good because I wouldn’t want any of your 
style designers messing with my structure elements. 


Yeah, that is obvious to me any time I look at 
CSS—talk about an alien language. 


Millions of web writers would disagree with you. 
I’ve got a nice clean syntax that fits right in with the 
content. 


Hey, ever heard of closing tags? 


Just notice that no matter where you go, I’ve 
got you surrounded by <style> tags. Good luck 
escaping! 


the language of the web 


CSS 


Fashion statement? Good design and layout can 
have a huge effect on how readable and usable 
pages are. And you should be happy that my 
flexible style rules allow designers to do all kinds 
of interesting things with your elements without 
messing up your structure. 


Don’t worry, we’re living in separate universes. 


Yeah, like HTML can be called a language? Who 
has ever seen such a clunky thing with all those 
tags? 


Just take a look at CSS; it’s so elegant and 
simple, no goofy angle brackets <around> 
<everything>. <See> <I> <can><talk> 
<just><like><Mr.><HTML><,><look><at> 
<me><!> 


Ha! Pll show you...because, guess what? I can 
escape... 


1 Stay tuned! 
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review of basic html and css 


Not only is this one fine cup of 
House Blend, but now we've got 
a web page to tell all our customers about 
our coffees. Excellent work. I've got some 


can you start thinking about how we are 
going to get these pages on the Internet so 
other people can see them? 


bigger ideas for the future; in the meantime, 


> BULLET POINTS 


= HTML and CSS are the languages we use to create 
web pages. 


m= Web servers store and serve web pages, which are 
created from HTML and CSS. Browsers retrieve 
pages and render their content based on the HTML 
and CSS. 


= HTMLis an abbreviation for HyperText Markup 
Language and is used to structure your web page. 


= CSS is an abbreviation for Cascading Style Sheets, 
and is used to control the presentation of your 
HTML. 


= Using HTML, we mark up content with tags to 
provide structure. We call matching tags, and their 
enclosed content, elements. 


= Anelement is composed of three parts: an opening 
tag, content, and a closing tag. There are a few 
elements, like <img>, that are an exception to this 
rule. 


= Opening tags can have attributes. We've seen one 
already: type. 


Closing tags have a “/” after the left angle bracket, 
in front of the tag name, to distinguish them as 
Closing tags. 


Your pages should always have an <html> element 
along with a <head> element and a <body> 
element. 


Information about the web page goes into the 
<head> element. 


What you put into the <body> element is what you 
see in the browser. 


Most whitespace (tabs, returns, spaces) is ignored 
by the browser, but you can use it to make your 
HTML more readable (to you). 


You can add CSS to an HTML web page by 
putting the CSS rules inside the <style> element. 
The <style> element should always be inside the 
<head> element. 


You specify the style characteristics of the elements 
in your HTML using CSS. 
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the language 


M8 2 HTMLeross 


oe ee 
See It’s time to sit back and give your left brain something to do. It’s your 
standard crossword; all of the solution words are from this chapter. 


web 


1 2 3 
4 5 6 7 
8 9 
10 11 
12 
13 
14 
15 16 
17 
18 
Across Down 
2. The "M" in HTML. 1. There are six of these. 
8. Tags can have these to provide additional information. 3. CSS is used when you need to control this. 
10. Browsers ignore this. 4. You mark up content to provide this. 
12. You define presentation through this element. 5. Appears at the top of the browser for each page. 
13. Purpose of <p> element. 6. Style we wish we could have had. 
15. Two tags and content. 7. Company that launched your web career. 
17. What you see in your page. 9. Only type of style available. 
18. We emphasized Dance Revolution. 11. Always separate these in HTML. 


14. About your web page. 
16. Opening and closing. 
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exercise solutions 


Go ahead and mark up the napkin (using your pencil) with any 
structure you see, and add anything that is missing. 


Not going to be part 
of the web page 


Motha Cafe Latte, $7.39 


Z " ayns: 
steamed milk and chocolate syruR- eee 
: SSO) Ls 
ah nee goede nie 
no 


1 Nt oe 
eeino, 71-84 ai 
7 € sell ee espresso, steamed milk and foa 
NOS { - 
More gonad 9 


' 31.89 howe: 
| ay "Fraibn black tea, spices mill and Done 
: s¥i 


: 
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—= 


ae , Markup Magnets Solution 


; — Your job was to add some structure to the text from the Starbuzz 
i napkin. Use the fridge magnets at the bottom of the page 

to mark up the text so that you've indicated which parts are 

headings, subheadings, and paragraph text. Here's our solution. 


<hl> Starbuzz Coffee Beverages 
<h2> |House Blend, #1.49[ </na> ] 


A smooth, mild blend of coffees from Mexico, Bolivia and 


Guatemala. 


<h2> | Mocha Cafe Latte, $2.35 
Espresso, steamed milk and chocolate syrup.[ </p> | 


Cappuccino, $1.89 


<p> A mixture of espresso, steamed milk and foam.| </p> | 


<h2> chai Tea, $1.85 [</na> ] 
<p> |A spicy drink made with black tea, spices, milk and honey.| </p>} 


A 
& y 
v 


L <> 
2 
[<> | 


te 
Ba 


“Ss 


Leftover magnets 
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exercise solutions 


} 
| 
| 


mission. html 


<html> 


J <head> 
Een veRcise 
OLution 


<title>Starbuzz Coffee's Mission</title> 
</head> 


<body> 


<h1l>Starbuzz Coffee's Mission</hl1> 


<p>To provide all the caffeine that you need to 
‘ power your life.</p> 
. 


i 5 "iy 
| Starbuzz Coffee's \ 
4 Mission ’ 

To provide all the 
caffeine that you 


need to power your 
| life. 


<p>Just drink it.</p> 
</body> 


</html> 


Just drink it. 


Here’s the HTML. 
are  Starbure Coffee's Mision: 1 
Fae [elf +] Snkiichapteriysaree masons 


‘Starbuzz Coffee's Mission 


To provide all the caffeine that you need to power your life. 
| det Gink tt 


Here's the HTML 
displayed in a browser. 
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the language of the web 


Exetcit | 
OLution e808 © mission.html 


<html> 


<head> 
<title>Starbuzz Coffee's Mission</title> 
<style type="“text/ess”> 
; ; body { 
Here s the CSS in the background-color: #d2b4e; 
a a iL margin-left: 20%; 
margin—vight: 20%; 
border: 2px dotted black; 
padding: |Opx |Opx |Opx |Opx; 
font—family: sans-serif; 


} 
</style> 
</head> 


<body> 
<hl>Starbuzz Coffee's Mission</hl> 


<p>To provide all the caffeine that you need to power 
your life.</p> 


<p>Just drink it.</p> 
</body> 
</html> 


Now, the style matches 
the main Starbuzz page: 


ear oy nee MM EEY 
E CPA CF a ie ag a Pa 
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exercise 


+ J 


wHO Does wHearT? 


Even though you've just glanced at CSS, you've already seen the beginnings of 


td = 
Rcise what it can do. Match each line in the style definition to what it does. 
ne 
OLUtiON 


Defines the font te use for text. 
background-color: #d2b48c; 


Defines a border around the body 
that is dotted and the color black. 


margin-left: 20%; 
margin-right: 20%; 


Sets the left and right margins to 
take up 20% of the page each. 


border: 2px dotted black; 


padding: 10px 10px 10px 10px; Sets the background color te tan. 


Creates some padding around the 
font-family: sans-serif; body of the page. 


'H ‘M AR KU °P 
E 'S R a is "S 
"AL T/TIRII|/BJUITIE|S I 0 T ai 
D R S WIHIT/TIE;S|P|A/C/E 
I U S74 /¥ |LE E E K R x 
N C N A E I B T 
G T as D ¥. U C 
S U ‘P AR AGRA PH S Z S 
R 'H T N C z S 
‘E]LIE|MIE|N'T I D H 
A A O ‘B/O|DIY 
D G N O 
5 ‘DIAIN| C/E 
y 
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2 going further with hypertext 


* Meeting the “HT” in HTML 


Right, that's me, they 
call me Hyper Ted. 


You're not listening. 
I came here to meet 
HyperTEXT! 


Did someone say “hypertext?” What’s that? On, only the entire 
basis of the Web. In Chapter 1 we kicked the tires of HTML and found it to be a nice 


markup language (the “ML” in HTML) for describing the structure of web pages. Now 
we’re going to check out the “HT” in HTML, hypertext, which will let us break free of 
a single page and link to other pages. Along the way we’re going to meet a powerful 
new element, the <a> element, and learn how being “relative” is a groovy thing. So, 


fasten your seat belts—you’re about to learn some hypertext. 


this is a new chapter 43 


www.it-ebooks.info 


improving the head first lounge 


Head First Lounge, new and improved 


Remember the Head First Lounge? Great site, but wouldn’t it be nice if 
customers could view a list of the refreshing elixirs? Even better, we should 
give customers some real driving directions so they can find the place. 


(Head Fleet Lewmge 


~ fe}, | +| = oi flle:} jiichaptar? foam pletelounpay Touran! 


Here's the new il nee to the New and Improved 
n ImProve: 
Head First Lounge a page 


page. aa 
— The lies wee elvaw ° eekions ; 
- \s 


with 3 full te 


We've added 

links to two Join es. any evening for redreshing clini. conversation and maybe 2 game or 
new Pages, one nett Doce Dome Revoliodon. Wireless aoos is always pooded: 

for elixirs and BYOWS (Bring Your Own Web Seaver). 

one for driving, & 

divections. “Directions 


| 
You'll fied os ght in oe center of downeren Webville. Ff you need help 
) Ending ws, check out our detgiled directions. Came join us! 


Pina Fed Lacon Ginisttere j The “detailed directions’ 
4 Fie rebut oorsertrfourays Ua eereece Fer J link leads to an HTML page 


with driving divections. 


Take te BS cock ss ie ~ pe ded 
Commer oe ~ poe 1 on 


‘Ture fight facie Ave 8 - ped 


Tire right ail bered fe edd Sregmere Aer ep D0 
Toa Figen Ave gem 


Donne: once AS — ed divections.html 
Torn righ SY! Priests OP ey - ps 


———— a 
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Bae ead Fine Lourge: Here 
ae Ce eS ee ee De Lj | 


Our Elixirs 


Green Tea Cooler 


&e Pheok fol of neni od mderah, Be die cob Gr he fel be 
FTEnS 6 Wi 8 nae of choice Wincor end ginger rae 


Ruapberry ioe Concentration 


1 
Combining mag beny ike wah enon pes. chev peel and risetips, this cy 
tik Will nuke Poor nied ded cheer eed Crip 


Hueberry Bliss Elixir 


Ses Blacberres: aad corp cecece mised eee beet of clio bo ea vi ge 
Ph io 6 peop eae oof bes tree Gee 


Cranberry Antioxidant Blast 


= Whale ap ithe fara et cebery ant Mberes le dis vitae 0 ref elicke 


csc bot) 


going further with hypertext 


A page listing some 
vexreshing, and healthy 
drinks. Feel free to grab 


one before goind, on- 


Creating the new and improved 
lounge in three steps... 


Let’s rework the original Head First Lounge 
page so it links to the two new pages. 


The first step is easy because we’ve already 
created the “directions.html” and 
“elixir.html’ files for  , 

you. You'll find them — heaps 

in the source files for — 
the book, which are 
available at http: //wickedlysmart.com/ 
hfhtmlcss. 


Next yow’re going to edit the “lounge.html” 
file and add in the HTML needed to link to 
“directions. html” and “elixir.html”. 


(3) Last, you'll give the pages a test drive and 
try out your new links. When you get back, 
we'll sit down and look at how it all works. 


Flip the page and let’s get started... 


you are here > 45 


www.it-ebooks.info 


looking at the source files 


Creating the new lounge 
@ Grab the souree files 


Go ahead and grab the source files from http: //wickedlysmart.com/hfhtmlicss. 
Once you’ve downloaded them, look under the folder “chapter2/lounge” and you'll 
find “lounge.html”, “elixir html”, and “directions.html” (and a bunch of image files). | 


e euevent lounge 


ks: 


rere's th . 
file, without I 


' ivettory —— 
1 Lind the lounge divet 
io in ees source files ~__—-7 | 


chapter2 Two new files, already 


written for you. Go 
ahead and take a 
peek—you already know 
everything you need to 
understand them. 


elixir.html 


All the lounge Files 
are in this Tider. 


iret 
.. blue.jpg 
: . ] iinet 
And here's all the drinks gif Pe 
images needed J 
for our new and lightblue.ipg 


improved lounge. red.jpg 


i ERAN 
POWER 


The Head First Lounge is already growing; do you think that keeping all the site’s files in a 
single directory is a good way to organize the site? What would you do differently? 
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Edit lounge.html 


Open “lounge.htm!” in your editor. Add the new text and HTML that is highlighted below. 
Go ahead and type this in; we’ll come back and see how it all works on the next page. 


<html> 
<head> » ina. 
; : Let’s add “New and Improved’ to the meaning 
<title>Head First Lounge</title> 
</head> 
<body> 
<hl>Welcome to the New and Improved Head First Lounge</hl1> 
Sans Sec- sh inhegie Here's where we add the HTML for the link to the 
<p> ra elixirs. | 
Join us any evening for _——~ To treate links, we use the 
refreshing <a href="elixir.html">elixirs</a>, <a> element; well take a 
conversation and maybe a game or two of look at how this element 
<em>Dance Dance Revolution</em>. works in just a see... 


Wireless access is always provided; 


BYOWS (Bring your own web server). 


We need to add some text 


peu F . here to point customers to 
<h2>Directions</h2> Lve-naw directions. 
<p> 


You'll find us right in the center of downtown Webville. 
If you need help finding us, check out 
our <a href="directions.html">detailed directions</a>. 
Come join us! 
</p> 
</body> 
</html> And here’s where we add the link to the directions, again using an 
<a> element. 


Save lounge.html and give it a test drive. 


When you're finished with the changes, save the file “lounge.html” and open it in 
your browser. Here are a few things to try: 
@ Click on the elixir link and the new elixir page will display. 


@ Click on the browser’s back button and “lounge.html” 
should be displayed again. 


© Click on the directions link and the new directions page 
will display. 
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Okay, I've loaded the new 
lounge page, clicked the links, 
and everything worked. But I 

want to make sure I understand 

how the HTML works. 


Behind 
r the Scenes 


What did we do? 


@) Let's step through creating the HTML links. First, we need to put 
the text we want for the link in an <a> element, like this: 


<a>elixirs</a> <a>driving directions</a> 


The <g> element is us eae The content of the <a> element is the link text. In 
Create a link to another the browser, the link text appears with an underline to 
Page indicate you can click on it. 


@ Now that we have text for the link, we need to add some 


HTML to tell the browser where the link points to: For this link, the browser will 


Wop os » hat, 
display the text elixirs” that, 
—_ ce Lene will take the user 


<a href="elixir .html">elixirs</a> ko the “elixir-html” page: 


The href attribute is 
how you specify the And for this link, the browser will display a 
destination of the link. 


Y 
“driving directions” link that, when clicked, will 
take the user to the “directions.html” page. 
<a href="directions.html">driving directions</a> 
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What does the browser do? 


First, as the browser renders the page, if it encounters an <a> 


element, it takes the content of the element and displays it the Scenes 
as a clickable link. 


<a href="elixir.html">elixirs</a> 


beac frat Lourge 


0 


Welcome to tte New and Improved Head First 
Lounge 


Both “elixirs” and “detailed iW 
directions” are between the T 
opening and closing, <a> tags, 

so they end uP being clickable —~> fo wy cot 
text in the web page. Reviatane 


. 
- 
ge Toe redeeshitn ehags.« 


conversalion and maybe o gett of two of Dance Donce 
Wireless access is ways provided: BYOW'S (Hishg Yow Own Wed Serve 


Directions 


You'll fig ee night in tho comer of doer 


p Webvile. If vos need help finding ws, check ost cur 
jemiled director Come join us 


> i 
<a href="directions.html">detailed directions</a> 


Use the <a> element to create a hypertext link to another web page. 


The content of the <a> element becomes clickable in the web page. 
The href attribute tells the browser the destination of the link. 
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how links work 


Behind 
the Scenes 


Next, when a user clicks ona link, the browser uses the “href” 
attribute to determine the page the link points to. 


; teed Firat Lounge 
Eo Oo eee 


Welcome to the New and Improved Head First 
Lounge 


The user clicks on either the iv T ia ¥ 


“clixivs” link ov... 


Joan us ary evening for nebedbieg gig. conversiiion and mirbe o pate or to of Doce Dooce 
We Rtvwudiow. Wireless access lb ales povided: BY O'S Chnog Yow Cen Wob Serves). 


on 


Directions 


W si ry ‘ » 
on “detailed directions’. ical cl mgt Eth cio Mccain Cb 1 jc el ans Giga ant 


A denied dinsnors Come join us! 


When “detailed directions” is 
clicked, the browser grabs the 
value of the href attribute, in 
this case “diveetions-html”... 


If “elixirs” was clicked, the 
browser grabs the href value 
“elixiv. html”... 


<a href="elixir.html">elixirs</a> 
..and displays the 
“elixiv-html” page: 


<a href="directions.html">detailed directions</a> eee 


and loads “diveetions-html”. ¥ 


= ae 
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Understanding attributes 


Attributes give you a way to specify additional information about 


an element. While we haven’t looked at attributes in detail, you’ve 
already seen a few examples of them: 


The type attribute specifies which style 
—_—_ language were using, in this ease CSS. 
<style type="text/css"> The href attribute tells us the destination of a hyperlink. 
<a href="irule.html"> 


Th op. 
<img src="sweetphoto gitt>  / th . rata re sei Filename of 


Let’s cook up an example to give you an even better feel for how 
attributes work: 


What if <car> were an element? 
If <car> were an element, then you’d naturally want to write some 


With no attributes, all we can supply 
is a deseriptive name for the ear. 


markup like this: 


<car>My Red Mini</car> 


But this <car> element only gives a descriptive name for your But with attributes, we can 
car—it doesn’t tell us the make, precise model, whether it is a customize the element with 
convertible, or a zillion other details we might want to know. So, if all kinds of information. 


<car> were really an element, we might use attributes like this: 
<car make="Mini" model="Cooper" convertible="no">My Red Mini</car> 


Better, right? Now this markup tells us a lot more information in 
an easy-to-write, convenient form. 


SAFETY poanith - 
eciest 0 this (best practice 


; ; <a href="topl0.html">Great Movies</a> 
Attributes are always written the an en p 


— 
same way: first comes the attribute an y NW fae quote 
name, followed by an equals sign, and then the equals ‘sign attribute value 


attribute value surrounded in double quotes. attribute name a le 
quo e 


You may see some sloppy HTML on the Web 

that leaves off the double quotes, but don’t get Not this 
lazy yourself. Being sloppy can cause you a lot 

of problems down the road (as we'll see later in <a href=top10.html>Great Movies</a> 


the book). No double quotes around the attribute value 
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attributes and elements 


The “href" attribute is 
pronounced "h - ref"... 


..thymes with 
“space chef". 
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thereyareno 
Dumb Questions 


Q: Can | just make up new attributes for an HTML 
element? 


A: Web browsers only know about a predefined set of 
attributes for each element. If you just made up attributes, 
then browsers wouldn't know what to do with them, and as 
you'll see later in the book, doing this will very likely get you 
into trouble. When a browser recognizes an element or an 
attribute, we like to say that it “supports” that element or 
attribute. You should only use attributes that you know are 
supported. 


That said, for programming web applications (the subject 
of Head First HTML5 Programming), HTML5 now supports 
custom data attributes that allow you to make up custom 
names for new attributes. 


Q: Who decides what is “supported”? 


A: There are standards committees that worry about the 
elements and attributes of HTML. These committees are made 
up of people with nething-betterte-de who generously give 
their time and energy to make sure there’s a common HTML 
roadmap that all organizations can use to implement their 
browsers. 


i) How do | know what attributes and elements 
are supported? Or can all attributes be applied to any 
element? 


A: Only certain attributes can be used with a given 
element. Think about it this way: you wouldn’t use an attribute 
“convertible” with the element <toaster>, would you? So, you 
only want to use attributes that make sense and are supported 
by the element. 


You're going to be learning which attributes are supported by 
which elements as you make your way through the book. After 
you've finished the book, there are lots of great references 

you can use to refresh your memory, such as HTML & XHTML: 
The Definitive Guide (O'Reilly). 
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Attributes Exposed 


This week’s interview: 
Confessions of the href attribute 


Head First: Welcome, href. It’s certainly a pleasure to interview as big an attribute 
as you. 


href: Thanks. It’s good to be here and get away from all the linking; it can wear an 
attribute out. Every time someone clicks on a link, guess who gets to tell the browser 
where to go next? That would be me. 


Head First: We’re glad you could work us into your busy schedule. Why don’t you 
take us back to the beginning...What does it mean to be an attribute? 


href: Sure. Well, attributes are used to customize an element. It’s easy to wrap some 
<a> tags around a piece of content, like “Sign up now!”—we do it like this: <a>Sign 
up now!</a>—but without me, the href attribute, you have no way to tell the <a> 
element the destination of the link. 


Head First: Got it so far... 


href: ...but with an attribute you can provide additional information about the 
element. In my case, that’s where the link points to: 

<a href="signup.html">Sign up now!</a>. This says that the <a> element, 
which is labeled “Sign up now!”, links to the “signup.html” page. Now, there are lots 
of other attributes in the world, but I’m the one you use with the <a> element to tell it 
where it points to. 


Head First: Nice. Now, I have to ask, and I hope you aren’t offended, but what is 
with the name? href? What’s with that? 


href: It’s an old Internet family name. It means “hypertext reference,” but all my 
friends just call me “href” for short. 


Head First: Which is? 


href: A hypertext reference is just another name for a resource that is on the Internet 
or your computer. Usually the resource is a web page, but I can also point to PDF 
documents...all kinds of things. 


Head First: Interesting. All our readers have seen so far are links to their own pages; 
how do we link to other pages and resources on the Web? 


href: Hey, I gotta get back to work, the whole Web is getting gunked up without me. 
Besides, isn’t it your job to teach them this stuff? 


Head First: Okay, okay, yes, we’re getting to that in a bit...thanks for joining us, href. 
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linking ‘he main page 


You've created links to go from “lounge.html” to “elixir.html” and “directions.html”; now we're 
A going to go back the other way. Below you'll find the HTML for “elixir.html”. Add a link with the 
Exerci$e label “Back to the Lounge” at the bottom of the elixir page that points back to “lounge.htm|”. 


<html> 
<head> 
<title>Head First Lounge Elixirs</title> 
</head> 
<body> 
<hl>Our Elixirs</hl1> 


<h2>Green Tea Cooler</h2> 
<p> 

<img src="green.jpg"> 

Chock full of vitamins and minerals, this elixir 

combines the healthful benefits of green tea with 

a twist of chamomile blossoms and ginger root. 
</p> 
<h2>Raspberry Ice Concentration</h2> 
<p> 

<img src="lightblue.jpg"> 

Combining raspberry juice with lemon grass, 

citrus peel and rosehips, this icy drink 

will make your mind feel clear and crisp. 
</p> 
<h2>Blueberry Bliss Elixir</h2> 
<p> 

<img src="blue.jpg"> 

Blueberries and cherry essence mixed into a base 

of elderflower herb tea will put you in a relaxed 

state of bliss in no time. 
</p> 
<h2>Cranberry Antioxidant Blast</h2> 
<p> 

<img src="red.jpg"> 

Wake up to the flavors of cranberry and hibiscus 

in this vitamin C rich elixir. 


</p> 

Your new 

HTML goes \_y 

here. 

</body> 
</html> 
When you are done, go ahead and do the same with “directions.html” as well. 
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going further with 


We need some help constructing and deconstructing <a> elements. Given your new 
knowledge of the <a> element, we’re hoping you can help. In each row below, you'll find some 
combination of the label, destination, and the complete <a> element. Fill in any information 


that is missing. The first row is done for you. 


Destination 


Hot or Not? hot-html 


candy. html 


See my mini | mini-cooper.html 


let's play 


sae br no 


Questions 


pum 


Q: I’ve seen many pages where | can click on an image rather 
than text. Can | use the <a> element for that? 


A: Yes, if you put an <img> element between the <a> tags, then 
your image will be clickable just like text. We're not going to talk 
about images in depth for a few chapters, but they work just fine as 
links. 


What you write in HTML 


<a href="hot.html">Hot or Not?</a> 


<a href=" 


<a href="millionaire.html1"> 


Q: So | can put anything between the <a> tags and it will be 
clickable? Like, say, a paragraph? 


A: You can indeed put a <p> element inside an <a> element to 
link an entire paragraph. You'll mostly be using text and images (or 
both) within the <a> element, but if you need to link a <p> or a <h1> 
element, you can. What tags will go inside other tags is a whole other 
topic, but don’t worry; we'll get there soon enough. 
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organizing your site with folders 


Your work on the Head 
First Lounge has really paid 
off. With those enticing elixirs and directions, 
lots of people are frequenting the place and 
visiting the website. Now we've got plans for 
expanding the lounge’s online content in all 
sorts of directions. 


Getting organized 


Before you start creating more HTML pages, it’s time to get 
things organized. So far, we’ve been putting all our files and 
images in one folder. You'll find that even for modestly sized 
websites, things are much more manageable if you organize your 
web pages, graphics, and other resources into a set of folders. 


Here’s what we’ve got now: 
Here ave the 


three HTML 
) La top-level folder a files: for the 
ed iter that holds all __ Tounge-html lounge, the 


our Liles in the site. y elixirs page, 


and the 
directions. 


This is often referred to as the “root” folder of 
the site, which means it is the top-level folder 
that contains the entire site. 


And here are all the images. See, this is drinks gif 
getting sorta cluttered already, and we only 
have three pages and a few graphics. Let's 


do something about it... 
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Organizing the lounge... 


Let’s give the lounge site some meaningful organization now. 


Keep in mind there are lots of ways to organize any site; we’re 


going to start simple and create a couple of folders for pages. 


We'll also group all those images into one place. 


Our root folder is still the 


“lounge” Lol der. = 


directions.html 


Let's ereate a folder to 
hold pages about the lounge, 
like the directions. We 

tould also add new Pages 
here about the management, 
events, and so on. 


‘y Since you have a folder for images, 
why not have another one called “html” 
and put all the HTML in that folder? 


A: You could. There aren’t any “correct” 
ways to organize your files; rather, you 
want to organize them in a way that works 
best for you and your users. As with most 
design decisions, you want to choose an 
organization scheme that is flexible enough 
to grow, while keeping things as simple as 
you can. 


going further with hypertext 


We've going to leave the 


the “lounge” folder. 


elixir.html 


i 


We'll also create a folder to hold 
pages about the lounge’s beverages. 
Right now that’s just the elixirs, but 


we ll be adding more Soon. 


thereyareno 
Dumb Questions 


Q: Or why not put an images folder 
in each other folder, like “about” and 
“beverages”? 


A: Again, we could have. We expect that 
some of the images will be reused among 
several pages, so we put images in a folder 
at the root (the top level) to keep them all 
together. If you have a site that needs lots 
of images in different parts of the site, you 
might want each branch to have its own 
image folder. 
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main “lounge-html” Page in 


Hein 
lesa! 
. ea 
: feat eee 
aa ced jen ra 
red.jpg lightblue.jpg 
And let’s group 
all images in 
one folder- 


Q: “Each branch”? 


A: You can understand the way folders 
are described by looking at 


them as upside down 


trees. At the top is 
the root and each 
path down to a file 
or folder is a branch. 
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reorganizing and broken links 


Now you need to create the file and folder structure shown on the previous page. Here’s 
exactly what you need to do: 


Exercise 


@ Locate your “lounge” folder and create three new subfolders 
named “about”, “beverages”, and “images”. 


Move the file “directions.html” into the “about” folder. 
Move the file “elixir.html” into the “beverages” folder. 
Move all the images into the “images” folder. 


Finally, load your “lounge.html” file and try out the links. 
Compare with how ours worked below. 


Technical difficulties 


It looks like we’ve got a few problems 
with the lounge page after moving 
things around. 


a8 ea Oe Le 

+ GA 0 Scie ee ere moh, 
We've ot an im 7 
isn’ cieape, Welcome to the New and Improved 
call this a "broken image’ Head First Lounge 


\ U7 & 
Join oe any evening for retreshing eligi, eooverstion oad maybe io ume 


or bev of Dance Dance Merefeaion. W irelees noose is always provided, 
AYOWS (Bring yver wen eh wereer) 


And, when you tlick on “elixirs” (or “detailed Directions 
directions’) things get much <— we get an 

i : : Yow ll find vs right in the easter of downtown Webrille. If you need help 
error saying the page can't be ‘sound Lpkagrpebegingachimens pbb ail 


Alri fe 


ii "Thee Fike BE: rege hel cee et: be Poel. Clee (cheer chee bocatien ered iry eer. 


a 


Some browsers display 
this error as a web page 
rather than a dialog box. 
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going further with hypertext 


T think the problem is that the 
browser thinks the files are still in the 
same folder as “lounge.html". We need to 
change the links so they point to the files in 
their new folders. 


Right. We need to tell the 
browser the new location 
of the pages. 


So far you’ve used href values that 
point to pages in the same folder. Sites 
are usually a little more complicated, 
though, and you need to be able to 
point to pages that are in other folders. 


To do that, you trace the path from 
your page to the destination file. That 
might mean going down a folder or two, 
or up a folder or two, but either way we 
end up with a relative path that we can 
put in the href. 
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working with paths 


Planning your paths... 


What do you do when you’re planning that vacation Okay, you'd 
in the family truckster? You get out a map and really go to 
start at your current location, and then trace a path Google Mars, 
to the destination. The directions themselves are but work 
relative to your location—if you were in another city, with us here! 


they’d be different directions, right? 


To figure out a relative path for your links, it’s the 


same deal: you start from the page that has the link, There are other kinds of 
and then you trace a path through your folders until paths too. We'll get to 
you find the file you need to point to. those in later chapters. 


Let’s work through a couple of relative paths (and 
fix the lounge at the same time). 


Linking down into a subfolder 


@) Linking from “lounge.html" to “elixir.htm!". 


We need to fix the “elixirs” link in the “lounge.html” page. Here’s what the 
<a> element looks like now: 


Rioht now we're just. using, the 
-_ Ele saiie “olixiv-html’, which tells 
<a href="elixir.html">elixirs</a> tie becnnee bs lain Gea 


folder as “lounge-html 


@) Identify the source and the destination. 


When we reorganized the lounge, we left “lounge.html” in the “lounge” folder, and 
we put “elixir html” in the “beverages” folder, which is a subfolder of “lounge”. 


L— Start here... 


lounge.html *) 
in 
a re =, f 
beverages)... | images i200 4 blue jpg 
- - —— ~~ drinks. gif 7a bess 
= A 


directions.html elixir.html oe | 


\ and find a red.jpg lightblue.jpg 
path to here. 
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going further with hypertext 


©) Trace a path from the source to the destination. 


Let’s trace the path. To get from the “lounge.html!” file to “elixirhtml”, we need to go 
into the “beverages” folder first, and then we’ll find “elixirhtml]” in that folder. 


First, we need to 
go down into the 
“beverages” folder. 


lounge.html tas 
B- 
F = =, Ea 
oA F bees 2, Fy B blue jpg 
! ——*  @einks gif Lis 
directions.html elixir.html oe i 
lightblue.jpg 


red.jpg 


And “elixir. html” is 
directly in that folder. 


@ Create an href to represent the path we traced. 


Now that we know the path, we need to get it into a format the browser 
understands. Here’s how you write the path: 


Separate all parts of 
First, we go into the the path with a “/”. 


Filename. 
beverages folder. \ | f ename 


beverages / elixir.html 


Finally, we have the 


Putting it all together... 


Pe" | a 
<a href="beverages/elixir.html">elixirs</a> 


We put the velative path into the href value. Now when the link is clicked, the 
browser will look for the “elixir.html” File in the “beverages” folder. 
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a little practice with paths 


z Your turn: trace the relative path from “lounge.html” to “directions.html”. When you've 
; discovered it, complete the <a> element below. Check your answer in the back of the 


chapter, and then go ahead and change both <a> elements in “lounge.html.” 


mary greenjpg Jacke 


ics 


“"-drinks.gif Jeary fle! 


directions.html elixir.html vee. itietigy °° 


lightblue.jpg 


red.jpg 


<a href=" "Sdetailed directions</a> 


Your ANSWE 
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going further with hypertext 


Going the other way; linking up into a “parent” folder 


@) Linking from “directions.html” to “lounge.html". Right now withee uct 
Now we need to fix those “Back to the Lounge” links. Here’s what the <a> using the filename 
element looks like in the “directions.htm!” file: “lounge-html” which tells 


a ~~ the browser to look in 


the same folder as 
<a href="lounge.html">Back to the Lounge</a> “divections html”. Thats 


not goind, to work. 
@) Identify the source and the destination. 
Let’s ae at the Sed find a 
source and destination. 
ath to here- 
The source is now — P 
the “directions.html” = —s—i(is—‘“—;~—CS tounge mo | 
file, which is down in 
lounge.html Ce 


the “about” folder. The 


destination is the re 


“lounge.html” file that sits *s ae ‘- green dpa” ES 
above the “about” folder, }..-P beverages)» images | avs si 
- : / “-drinks.gif 7p fae 

si AS 


where “directions.html” _ Li 
directions.html elixir.html he 
£4 red,jpg lightblue.jpg 
Start here... 


® Trace a path from the source to the destination. 


Let’s trace the path. and “lounge-htm!” is 
To get from the directly in that folder. 
“directions.html” file to 


“lounge.html”, we need to 
go up one folder into the 
“lounge” folder, and then 


is located. 


meat 


lounge.html Li 


we'll find “lounge.html” 
in that folder. 


Sy green jpg & 
Sl ; beverages) i | [= of a 
- - st drinks. gif PE, =a 
directions.html elixir.html or | i 
Fivst, we need to red. jpg lightblue.jpg 
go UP into the 


“| ounge” folder... 
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building the href 


@ Create an href to represent the path we traced. 


We’re almost there. Now that you know the path, you need to get it 
into a format the browser understands. Let’s work through this: 


d to 90 Separate all parts of 
Fist er How do » the path with a « if Fray, oe . 
a ° 2 wit! +h a“ een 
Th e. iat Lwo periods: | C 
puget it, we ll exylain = 
“ .. / lounge. html 


a 


Pronounce “..” as “dot dot”. 


Putting it all together... 


Pome | 


<a href="../lounge.html">Back to the Lounge</a> 


Now when you click on the link, the 
browser will look for the “lounge. html” 
File in the folder above. 


Dot dot 
Up, down, 


housewares, 
lingerie? 
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Q: What’s a parent folder? If | have a 
folder “apples” inside a folder “fruit”, is 
“fruit” the parent of “apples”? 


A: Exactly. Folders (you might have heard 
these called directories) are often described 
in terms of family relationships. For instance, 
using your example, “fruit” is the parent of 
“apples”, and “apples” is the child of “fruit”. 

If you had another folder “pears” that was 

a child of “fruit”, it would be a sibling of 
“apples.” Just think of a family tree. 


Q: Okay, parent makes sense, but 
what is “..”? 


A: When you need to tell the browser that 
the file you're linking to is in the parent folder, 
you use “..” to mean “move UP to the parent 
folder.” In other words, it’s browser-speak 

for parent. 


In our example, we wanted to link from 
“directions.html”, which is in the “about” folder, 
to “lounge.html’, which is in the “lounge” 
folder, the parent of “about”. So we had to 
tell the browser to look UP one folder, and “..” 
is the way we tell the browser to go UP. 


eSB RAIN 
IPQWER 


thereyareno 
Dumb Questions 


Q: What do you do if you need to go 
up two folders instead of just one? 


A: You can use “..” for each parent folder 
you want to go up. Each time you use “..” 
you're going up by one parent folder. So, if 
you want to go up two folders, you'd type 
“_/..”. You still have to separate each part with 
the “/”, so don’t forget to do that (the browser 


won't know what “....” means!). 


Q: Once I'm up two folders, how do | 
tell the browser where to find the file? 


A: You combine the “../..” with the 
filename. So, if you’re linking to a file called 
“fruit.html’ in a folder that’s two folders up, 
you'd write “../../fruit.html”. You might expect 
that we'd call “../..” the “grandparent” folder, 
but we don’t usually talk about them that way, 
and instead say, “the parent of the parent 
folder,” or “../..” for short. 


0} Is there a limit to how far up | can 
go? 


A: You can go up until you're at the root 
of your website. In our example, the root was 
the “lounge” folder. So, you could only go up 
as far as “lounge”. 


Your turn: trace the relative path from “elixir.html” to “lounge.html” from the “Back to the 
Lounge” link. How does it differ from the same link in the “directions.html’” file? 
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going further with 


Q: What about in the other direction— 
is there a limit to how many folders | can 
go down? 


A: Well, you can only go down as many 
folders as you have created. If you create 
folders that are 10 deep, then you can write 
a path that takes you down 10 folders. But 
we don’t recommend that—when you have 
that many folder levels, it probably means 
your website organization is too complicated! 


In addition, some browsers impose a limit 
on the number of characters you can have 
in a path. The spec advises caution above 
255 characters, although modern browsers 
support longer lengths. If you have a large 
site, however, it’s something to be aware of. 


Q: My operating system uses “\” as 
a separator; shouldn’t | be using that 
instead of “/”? 


A: No; in web pages you always use “/” 
(forward slash). Don’t use “\” (backslash). 
Various operating systems use different file 
separators (for instance, Windows uses “\” 
instead of “/”) but when it comes to the Web, 
we pick a common separator and all stick to 
it. So, whether you're using Mac, Windows, 
Linux, or something else, always use “/” in 
the paths in your HTML. 


‘ales ay} Apoexa SI jl 4.useop }] JEMSUY 


65 


relative paths and images 


Fixing those broken images... 


You’ve almost got the lounge back in working order; all you 
need to do now 1s fix those images that aren’t displaying. 


We haven’t looked at the <img> element in detail yet (we will 
in a couple of chapters), but all you need to know for now is 
that the <img> element’s src attribute takes a relative path, 
just like the href attribute. 


Here’s the image element from the “lounge.html” file: 


<img src="drinks.gif"> 
ed 
Here’s the relative path, which tells the 
browser where the image is located. We 
specify this just like we do with the href 
attribute in the <a> element. 


Hey, it's nice you fixed all 
those links, but didn't you forget 
something? All our images are broken! 
Don't leave us hanging—we've got a 
business to run. 


Finding the path from “lounge.html” to “drinks.gif” 


To find the path, we need to go from the “lounge.html!” file to 


where the images are located, in the “images” folder. 


- eve in the lounge 
OAL: weve in 
. and we need to get 
to the images folder- 


down w 


directions.html 


a — o> a 
| 


beverages} f | 


elixir.html 


(2) There’s our 
File, “dvinks.gif”. 


So when we put (1) and (2) together, our path looks like “images/drinks.gif”, or: 


<img src="images/drinks.gif"> 
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7 Be. 


Start here... 


(1) Go down into 
the images folder. 


By greendpg 


blue.jpg 


-drinks.gif ty ja 
Palas : : 


and find a 
path to here. 


going further with hypertext 


Finding the path from “elixir.html” to “red.jpg” 


The elixirs page contains images of several drinks: “red.jpg”, 
“green.jpg”, “blue.jpg”, and so on. Let’s figure out the path to 
“red.jpg” and then the rest will have a similar path because they 

are all in the same folder: 


GOAL: we've in the 
beverages folder and we 


need to get over to the (2) And then down into 


images tolder the “images” folder. 
im : 


lounge.html 
a 


, - fe yy sreen ipa ; 
beverages Nis images blue jpg ..and find a 
— i im path to here. 
= = “*-drinks.gif : aaa beri 
directions.html elixir.html oe =] . ES 
“ red.jpg lightblue.jpg 
(1) So we go up to the parent Start here 
folder, “lounge”: Remember “ 
this will be written as “in ” 
the path. (3) Finally, we find “ved jpg. - 
So putting (1) , (2), and (3) together, we get: 
Down into oa tha the 
Up to the “7” in between the “images” /” in between ilename itself 
parent folder | me : C 
ie / images / red.jpg 
<img src="../images/red.jpg"> 
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fixing images with relative links 


That covers all the links we broke when we reorganized the lounge, although you still need to 
fix the images in your “lounge.html” and “elixir.html” files. Here’s exactly what you need to do: 


In “lounge.html’, update the image src attribute 
to have the value “images/drinks.gif”. 


In “elixir.html”, update the image src attribute so 
that “../images/” comes before each image name. 


Save both files and load “lounge.html” in your 
browser. You'll now be able to navigate between 
all the pages and view the images. 


PS. If you're having any trouble, the folder 


“chapter2/completelounge” contains a working version of 
the lounge. Double-check your work against it. 


You did it! Now 
we've got organization and 
all our links are working. Time 
to celebrate. Join us and have a 
green tea cooler. 


And then we 


can take the site to 
the next levell 
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nes BULLET POINTS 


When you want to link from one page 
to another, use the <a> element. 


The href attribute of the <a> element 
specifies the destination of the link. 


The content of the <a> element is the 
label for the link. The label is what 
you see on the web page. By default, 
it's underlined to indicate you can 
Click on it. 


You can use words or an image as 
the label for a link. 


When you click on a link, the browser 
loads the web page that’s specified 
in the href attribute. 


You can link to files in the same 
folder, or files in other folders. 


Arelative path is a link that points to 
other files on your website relative 
to the web page you're linking from. 
Just like on a map, the destination is 
relative to the starting point. 


going further with 


Use “..” to link to a file that’s one 
folder above the file you're linking 
from. 


“on 


means “parent folder.” 


Remember to separate the parts of 
your path with the “/” (forward slash) 
character. 


When your path to an image is 
incorrect, you'll see a broken image 
on your web page. 


Don't use spaces in the names you 
choose for files and folders for your 
website. 


It's a good idea to organize your 
website files early on in the process 
of building your site, so you don’t 
have to change a bunch of paths 
later when the website grows. 


There are many ways to organize a 
website; how you do it is up to you. 
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practicing paths 


The Relativity Grand Challenge 


Here’s your chance to put your relativity skills to the test. We’ve got a website for 
the top 100 albums in a folder named “music”. In this folder you'll find HTML files, 
other folders, and images. Your challenge is to find the relative paths we need so 
we can link from our web pages to other web pages and files. 


On this page, you'll see the website structure; on the next page, you'll find the 
tasks to test your skills. For each source file and destination file, it’s your job 
to make the correct relative path. If you succeed, you will truly be champion of 
relative paths. 


Good luck! Feel free to draw vight 


.¢ websit ieture 
i on this Wwe ere paths. 


to Figure ow 


music 


law 
a ain, 
a 
| ed 
genres Images logo.gif 
ioe ine 
|) iT i" 
a soa "egos 
ral | a id : ce lt 
e < darkside.gif floyd. gif 
roc 4 cdcovers *. artists °, 
“ : * laa i " 
a: ‘in 
a 
us , 
xandy.gif 


coldplay.html 
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i ith hypertext 
going further with hy 


It’s time for the competition to begin. 


Ready...set...write! 
” v6 in the 
“LoplOO-html is 
EYamMPLe aa naa folder so to a 
= / html oe to “genres html pa 
Lang Jenres/ genres.ntm foes bo o down into the 
“genres: folder 
top100.html genres.html 
Rounp One 
ie lon 
ey —_________-» |!!! 
fT 
top100.html logo.gif 
Rounp Two 
= -- 
oun aie 
> bassist 
genres.html logo.gif 
Rounp Turee 


top100.html pinkfloyd.html 


Bonus Kounp 


| am 


low 


lee —___________ fi!" 
oo] 


coldplay.html chris. gif 
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some fun 


HTMLeross 


How does a crossword help you learn HTML? Well, all the words are HTML- 
related and from this chapter. In addition, the clues provide the mental twist and 
turns that will help you burn alternative routes to HTML right into your brain! 


1 2 
3 
4 5 
6 7 8 
9 10 
11 12 
13. (14 15 
16 
17 
Across Down 
1. “../myfiles/index.html’ is this kind of link. 2. href and src are two of these. 
3. Another name for a folder. 4. Hardest-working attribute on the Web. 
6. Flavor of blue drink. 5. Rhymes with href. 
9. What href stands for. 7. Top folder of your site. 
13. Everything between the <a> and </a> is this. 8. The “HT” in HTML. 
16. Can go in an <a> element, just like text. 10. Healthy drink. 
17. Pronounced “..”. 11. A folder at the same level. 


12. Use .. to reach this kind of directory. 
14. Text between the <a> tags acts as a 
15. A subfolder is also called this. 
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going further with hypertext 


You needed to add a link with the label “Back to the Lounge” at the bottom of the elixir page that 
points back to “lounge.html”. Here’s our solution. 


ur. eel) Se ep Dei 


7 io + ete ore ee =| 


Our Elixirs 


Greco Tea Cooler 


<html> i 
<head> 


7 A fa od 5 . Cheek hut yas mad naa ihe cit poe the bos been 
<title>Head First Lounge Elixirs</title> | ciceus wutamura! choroid bleewas and winger oe 


</head> 
<body> Raspberry bee Concentration 
<h1l>Our Elixirs</hl1> 
<h2>Green Tea Cooler</h2> M 
<p> Cembining mapbaery pics wir keno pre, Clore: pec aed soe pe Bk icy 


. . ae ie ty ee Be ee a np, 
<img src="green.jpg"> 


Chock full of vitamins and mi, Blueherry Bliss Elixir 
combines the healthful benefi 
a twist of chamomile blossoms if 


</p> 
<h2>Raspberry Ice Concentration</h2> wee Flere, ore cherry eamece eeitael fawn a baree onl siberfiom es toevhs tive wll pt 
<p> oe oe echoed etc of Gliese: 
<img src="lightblue.jpg"> Cranberry Antioxident Blast 
Combining raspberry juice wit 
citrus peel and rosehips, thi 
will make your mind feel clea 7 
</p> Bie wpe Ge Govern of crecborry eed tibiae ie pees C rich che 
<h2>Blueberry Bliss Elixir</h2> cee 
<p> 
<img src="blue.jpg"> a aaa SSS 
Blueberries and cherry essence mixed into a bas 
of elderflower herb tea will put you in a relaxe\ 
state of bliss in no time. 
</p> 
<h2>Cranberry Antioxidant Blast</h2> 
<p> 
<img src="red.jpg"> 
Wake up to the flavors of cranberry and hibiscus 
in this vitamin C rich elixir. 
noe Here's the new <a> clement pointing 
<p> 
<a href="lounge.html">Back to the Lounge</a> back to the lounge: 
</p> 
</body> We put the link inside its own Paragraph 
</html> to keep things tidy. We'll talk more 


about this in the next chapter. 
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exercise 


Exereise solutions 


Label Destination Element 


Hot or Not? hot-html <a href="hot.html">Hot or Not?</a> 
ome wren eo 
Eye Candy candy .html 


rn |e 
let's play millionaire html <a href="millionaire.htm1"> let's play </a> 


R|E\LSA|TIII VIE 
T 
izrirelelc|tioiriy 
R 
‘H i °s 
"RIAIS|P/B/E/RIR|Y P *H 
E "a © A y 
F Tio C P 
HiviPjelRi|TiE|X|T/RIEl\FIE|RIE|Nicle 
S C L R 
ES "P H I T 
I ‘clLirfelkiale/tie Mex E 
B AMHR FOL x 
( B I) se R T 
TIM|AIGIE L N 
N Lim blo|tivio|t 
E 
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going further with hypertext 


Trace the relative path from “lounge.html” to “directions.html’. When you've 
discovered it, complete the <a> element below. 


Here’s the solution. Did you change both <a> elements in “lounge.html”? 


: ary greemspg ~ 3 
beverages es aos | oe ee 
. ee ioe! 


‘drinks. gif - ;jza1 
directions.html elixir.html he Aitietead Pet 
ramen iat 
lightblue.jpg 


i 
red.jpg 
“diveetions.html” 


<a href=" about/divections.html ">detailed directions</a> 


JouR ANSWER WERE > 


www.it-ebooks.info 


75 


76 


exercise solutions 


The Relativity Grand Challenge Solution 


a 
to lo 0.9%) we ha 
a pi into the 
images fLolder- 


toplOO-html is In the 
= — music felder, so to 


—_—_ genres html is down in 


the genres directory, so 
to get to logo.gif, we 
Livst had to 90 uP to 
music, and then down into 
logo.gif the images folder. 


From taplOOWerl - 9° 
, nvres) n 
Rovunp Turee down wd oa 4 Cind 


genres/ rotk/' pinkfloyd-html | 
>» 


lone 


genres.html 


a This was a tricky one. ip . 
" coldplay-html, which is down in 
= ° -_ the rock folder, we had to ge 
Le -/..Limages/artists/ehris.gif =a up TWO folders to get to ashes 
| > and then 90 down into images, 
and finally artists, to find the 
eveaner ohres.gif image chris.gif. Whew! 
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3 building blocks 
£ 


* 4. 
Web Page Construction 


hard hats, Betty. It's a real 
construction zone around here, and 
these web pages are going up fast! 


| was told I’d actually be creating web pages in this book? 
You've certainly learned a lot already: tags, elements, links, paths...but it’s all for 
nothing if you don’t create some killer web pages with that knowledge. In this chapter 
we’re going to ramp up construction: you’re going to take a web page from conception 
to blueprint, pour the foundation, build it, and even put on some finishing touches. All 
you need is your hard hat and your toolbelt, as we'll be adding some new tools and 


giving you some insider knowledge that would make Tim “The Toolman” Taylor proud. 
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meet tony and his segway 


Tory ~1 


What better way to enjoy my new 
Segway than to hit the open road? I'm 
riding it across the entire USA and I've been 
documenting my travels in my journal. What I 
really need to do is get this in a web page so 
my friends and family can see it. 


” _— Tony’ s journal 
7 BD 


Tony's Segway 
12 he side 
July \%, 210 Lyle signs on U 
y i : z1 se » 
) ush | saw some Burma 2 mpacitd tars) WA beenity 
Seg : ground the US on ok the voad nee you fr afimapse vs) ©) 
Dotumenting ie tan ‘ ee Weert be passing ary - 
Y very own | dexin 
20I2 
hee ds 2012 Avoyst 10, 


adventures—they'll 


Make sure you vead through Tony's 
tome in handy throughout the chapter: 
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building 


recommended 


From journal to website, at 1Z mph © Msc 


Tony’s got his hands full driving across the United States on his Segway. 
Why don’t you give him a hand and create a web page for him? 


Here’s what you're going to do: 


@ First, you’re going to create a rough sketch of the journal that is the basis for 
your page design. 


Next, you'll use the basic building blocks of HTML (<h1>, <h2>, <h3>, <p>, and so on) 
to translate your sketch into an outline (or blueprint) for the HTML page. 


Once you have the outline, then you’re going to translate it into real HTML. 


oo © 


Finally, with the basic page done, you’ll add some enhancements and meet 
some new HTML elements along the way. 


STOP! Do this exercise hefore turning the page. 


Take a close look at Tony’s journal 
and think about how you'd present the Your sketch 
same information in a web page. goes here. 


Draw a picture of that page on the right. 

No need to get too fancy; you’re just _— 
creating a rough sketch. Assume all his 

journal entries will be on one page. 


Things to think about: 


= = Think of the page in terms of large 
structural elements: headings, 
paragraphs, images, and so on. 


= = Are there ways his journal might be 
changed to be more appropriate for 
the Web? 
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making a rough sketch 


The rough design sketch 


Tony’s journal looks a lot like a web page; all we need to do to 
create the design sketch is to get all his entries on one page and 
map out the general organization. It looks like, for each day 
that Tony creates an entry, he has a date heading, an optional 
picture, and a description of what happened that day. Let’s 
look at the sketch... 


He also gave his journal a 
description. We'll capture 
that here as a small 
paragraph at the top. 


be 


Each day, Tony ereates an entry that 
includes the date, usually a picture, and 
a deseription of the day's adventures. 
So, that’s a heading, an image, and 
another paragraph of text. 


a, 


Sometimes he doesn’t in¢lude a picture. In this 
entry, he just has a heading (the date) and a 
description of the day's events. 


The third entry should look just 
like the first one: a heading, an 
image, and a paragraph. 


Unlike Tony's paper journal, our page lenoth a t 
limited, so we Can it many entries on one we! 
page. His friends and Family Can just use the 
stroll bar te stroll through his entries... 


f 
ite that we reversed the order o 
Huneeae ru Som newest, to oldest: That 
tries appear at the top 
thout serolling, 


the journal 
way) the most recent en : 
where users Can see them wi 
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Tony gave his journal a title, 
Segway'n USA,” so let’s get that 
right at the top as a heading, 


Segway'n USA 
Doeumenting my trip around the US on 
my very own Segway! 


August 20, 2012. 


Well | made it 1200 wiles already, and | passed 
through some interesting places on the way: 
Walla Walla, WA, Magie City, ID, Bountiful, 

UT, Last Chance, CO, Why; AZ and Truth or 
Consequences, NM. 


| saw some Burma Shave style signs on the side 
of the road today: “Passing ears, When you 
can't see, May get you, A glimpse, OF eternity.” 
| definitely won't be passing any cars. 


June 2, 2012 


My first day of the trip! | can’t believe 
finally got everything packed and ready to go. 
Because |’m on a Segway, | wasn't able to bring 
a whole lot with me: cell phone, iPod, digital 
camera, and a protein bar. Just the essentials. 
fis Lao Tzu would have said, “A journey of a 
thousand miles begins with one Seqway.” 


building blocks 


From a sketch to an outline 


Now that you’ve got a sketch of the page, you can take 
each section and draw something that looks more like 
an outline or blueprint for the HTML page... 


Here we've taken each area of the 


sketch and created a corresponding 
ee Fe Ge 


All you need to do now is figure out which HTML [| 


element maps to each content area, and then you can 


start writing the HTML. 

pee eee eee ee See eee 
1 EXERCISE: WEB CONSTRUCTION 

1 


You've already figured out the major 
architectural areas of the page; now you just 
need to nail down the building materials. Use 
the elements below to label each area. You 
won't use them all, so don’t worry if you have 
some building materials left over. And don't 
forget to wear your hard hat. 


a 
a 


\ 
yi 


peewee ee ew ee ewe eee 
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turning the outline into a web page 


From the outline to a web page 


You're almost there. You’ve created an outline of 
Tony’s web page. Now all you need to do is create 
the corresponding HTML to represent the page 
and fill in Tony’s text. 


Before you begin, remember that every web page 


Now that you know 
what “building blocks" make 
up each part of the page, you 
can translate this blueprint 
directly into HTML. 
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a eee 
needs to start with the <html> element and include i 
the <head> and <body> elements. 


Don’t forgets Yo 
chead>, <title>, 


ee 


=" 
——7 


building blocks 
u always need the <html>, 
and <body> elements: 


) We've using the title of the journal as 


<html> i the title of the web page. 
<head> 
<title>My Trip Around the USA on a Segway</title> 
</head> 
<body> 


Here's the heading, and 


) . 
ae s ournal: 
<hl>Segway'n USA</h1> a deseription of Tonys) 


<p> 
Documenting my trip around the US on my very own Segway! 


</p> : 
headin 
<h2>August 20, 2012</h2> wage 
<i ies / 2.4 ny a“ dest? on 
img src= images/segwayz.jpg , t ; t 
<p> Here's Tonys mo: 
Well I made it 1200 miles already, and I passed recent entry: 


through some interesting places on the way: Walla Walla, 
WA, Magic City, ID, Bountiful, UT, Last Chance, CO, 
Why, AZ and Truth or Consequences, NM. 

</p> 


<h2>July 14, 2012</h2> 
A Here’s his second 
I saw some Burma Shave style signs on the side of the entry witeh dover 
) 
road today: "Passing cars, When you can't see, May get 


have an image. 
you, A glimpse, Of eternity." I definitely won't be passing 


any cars. 
</p> 
the bottom 
<h2>June 2, 2012</h2> And ane entry) 
<img src="images/segwayl .jpg"> Tony ss" 30e 
with the imag 
<p> » 


My first day of the trip! I can't believe I finally got “seqway! JP” 
everything packed and ready to go. Because I'm on a Segway, 

I wasn't able to bring a whole lot with me: cell phone, iPod, 

digital camera, and a protein bar. Just the essentials. As 

Lao Tzu would have said, "A journey of a thousand miles begins 

with one Segway." 


</p> 


Last, but not least, don’t foraet to 
</body> , orge 
</html> LZ Close your <body> and <html> elements. 


Go ahead and type this in. Save your File to the “chapter3/ journal” folder as “SJourrnal-html”. You'll find the images 
“segwayl.jpg” and “segway2.jpq” already in the “images” folder. When you're done, give this page a test drive. 
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test driving tony's page 


Test driving Tony’s web page 


(My Trip Arporid che USA on 3 Segway 


| Detomenliag my wp ero the WS on iy very own Sepeay! 


August 20, 2012 


Well | oad it 12M aniles already, and | pase throngh pone 
bmeresting plnces om the way?) Palla Walla. WA, Magic Ciry, ID, 
Bountiful, UT, Last Chance, OO, Why, AS and Truth or 
Consequences, Mh 


July 14, 2012 

(sw some Burma Shave stele signs om the side of the road 
body: Passa aint, When youl cant dee, MA Ge you, A plinpen, 
Of etemoty. 1 definitely woot ist plssing any care. 


| June 2, 2012 0 


Fantastic! This looks 
great; I can't wait to add 
more entries to my page. 


My fret day of tie orp! Tcan't belived | finally got everything 
packed and ready to po, Because Ton a Seeeoy, | enn’ wble 
to bring a whole let wht me; cellphone, iPod, cligital camera, and 
a proiein bar. Jest the essentials. Ag lan Tm would ihawe salad, 
“A joumey of a thoosand miles begins with one Sepwoy." 


Tony's calling 
ae the oad... 
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building blocks 


Adding some new elements 


You have the basic elements of HTML down. You've gone from a hand- 
written journal to an online version in just a few steps using the basic 
HTML elements <p>, <h1>, <h2>, and <img>. 


Now we're going to s-t-r-e-t-c-h your brain a little and add a few more 
common elements. Let’s take another look at Tony’s journal and see 
where we can spruce things up a bit... 


a 


Aopen 31, BEF 


Dm fre ag rea 
Wally, Wid Maple Dies 1 
1 RE sal Tmt a 


My first day of the inp! T can't believe I finally gor everything 

packed and maddy to oo. Because I'mon a Seeway, | wasn't able ik a a a 

1 bring a whole Jot with me: cellphone, iPod, digital camera, —— 
amd a onoicin bar, Just the essentials, As Lio Tzu woukd have J 


said, "A journey of a thousand miles begins with one Segway." + |) 


[ ; i te 
Cheek this out: Tony has a little quo ; peor ee 
stuck at the end ot his Liest post. [t's sai cara 
his remixed version of a Lao Tzu quote: so error So 
“A journey of a thousand miles begins ; at | 


with one Segway.” 


HTML has an element, <9>, for just that kind of 
thing, Let's take a look on the next page... 
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quotes in your html 


Meet the <q> element 


Got a short quote in your HTML? The <q> element is just what 
you need. Here’s a little test HTML to show you how it works: 


<html> 
<head> 
<title>Quote Test Drive</title> We've got two quotes in this HTML... 
</head> 
<body> V 
<p> 


You never know when you'll need a good quote, how 
about <q>To be or not to be</q>, or <q>Wherever you go, there you are</q>. 
</p> 
</body> 
</html> 


We surround each quote with a <9> opening, tag and 


a </9> Closing, tag, N otice that we don’t put our own 
double—quote characters around the quotes. 


And test drive acigs 


fiat] Queca Test Drive 
And here’s how the quotes look in the Eo 8 occ SS 


browser. Notice the browser has gone to 5 : ; wee z ae = 
‘. 0 BEYeCr oy When Fou DEO &. pho Geol, bovey Aeout * To Or at i * 0 
the trouble of adding the double quotes. wis cai ac Mi year a 


Not all browsers display 
double quotes around the 
content in the <q> element. 


Wateh it! This is unfortunate, because if 


you add your own double quotes, 

some browsers will display 
TWO sets of quotes. We advise testing <q> in 
different browsers to see the results that you get. 
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Wait a sec...you removed 
the double quotes and 
substituted a <q> element, which just 
displays double quotes? Am I supposed 
to be impressed? Are you trying to 
make things more complicated? 


No. We’re trying to make things 
more structured and meaningful. 


There are lots of reasons people use double quotes 
in text, but when we use <q>, that means something 
specific—it means the text of an actual quote (in Tony’s 
case, a “remixed” quote). 


In other words, what we’ve done is to add more 
meaning by marking up the quote. Before we added 
the <q> element, the browser just knew it had a 
paragraph of text with a few double-quote characters 
in it. Now, because we’re using the <q> element, the 
browser knows that some of that text is a real quote. 


So what? Well, now that the browser knows this is a 
quote, it can display it in the best way possible. Some 
browsers will display double quotes around the text 
and some won’t; and in instances where browsers are 
using non-English languages, other methods might be 
used. And don’t forget mobile devices, like cell phones, 
or audio HTML browsers and screen readers for the 
visually impaired. It’s also useful in other situations, 
such as a search engine that scours the Web looking for 
web pages with quotes. Structure and meaning in your 
pages are Good Things. 


One of the best reasons (as you'll see when we get back 
to presentation and CSS later in the book) is that you’ll 
be able to style quotes to look just the way you want. 
Suppose you want quoted text to be displayed in italics 
and colored gray? If you’ve used the <q> element to 
structure the quoted content in your web pages, you'll 
be able to do just that. 
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building block: 


See! Using double 
quotes doesn + 
make something an 
attual quote. 
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adding 


Here’s Tony’s journal. Go ahead and rework his Lao Tzu quote to use the <q> 
Exercise element. After you've done it on paper, make the changes in your “journal.html” file 
‘| and give it a test drive. You'll find the solution in the back of the chapter. 


<html> 
<head> 
<title>Segway'n USA</title> 
</head> 
<body> 


<hl>Segway'n USA</h1> 
<p> 

Documenting my trip around the US on my very own Segway! 
</p> 


<h2>August 20, 2012</h2> 
<img src="images/segway2.jpg"> 
<p> 
Well I made it 1200 miles already, and I passed 
through some interesting places on the way: Walla Walla, 
WA, Magic City, ID, Bountiful, UT, Last Chance, CO, 
Why, AZ and Truth or Consequences, NM. 
</p> 


<h2>July 14, 2012</h2> 
<p> 
I saw some Burma Shave style signs on the side of the 
road today: "Passing cars, When you can't see, May get 
you, A glimpse, Of eternity." I definitely won't be passing 
any cars. 
</p> 


<h2>June 2, 2012</h2> 
<img src="images/segwayl .jpg"> 
<p> 
My first day of the trip! I can't believe I finally got 
everything packed and ready to go. Because I'm on a Segway, 
I wasn't able to bring a whole lot with me: cell phone, iPod, 
digital camera, and a protein bar. Just the essentials. As 
Lao Tzu would have said, "A journey of a thousand miles begins 
with one Segway." 
</p> 
</body> 
</html> 
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building 


The Case of the Elements Separated at Birth 


Identical twins were born in Webville a number of years ago, and by 

a freak accident involving an Internet router malfunction, the twins 

were separated shortly after birth. Both grew up without knowledge 

of the other, and only through another set of freak circumstances did 

they later meet and discover their identity, which they decided to 
keep secret. 


After the discovery, they quickly learned that they shared a 
surprising number of things in common. Both were married 
to wives named Citation. They also both had a love for 
quotations. The first twin, the <q> element, loved short, pithy 
quotes, while the second, <blockquote>, loved longer quotes, 
often memorizing complete passages from books or poems. 


Five-Minute 
Mystery 


ia 
i 
f 


Being identical twins, they bore a strong resemblance to each other, 
and so they decided to put together an evil scheme whereby they 
might stand in for each other now and then. They first tested this on 
their wives (the details of which we won’t go into), and they passed 
with flying colors—their wives had no idea (or at least pretended not 
to). 


Next they wanted to test their switching scheme in the workplace 
where, as another coincidence, they both performed the same job: 
marking up quotes in HTML documents. So, on the chosen day, the 
brothers went to the other’s workplace fully confident they’d pull off 
their evil plan (after all, if their wives couldn’t tell, how could their 
bosses?), and that’s when things turned bad. Within 10 minutes of 
starting the work day, the brothers had both been found to be imposters 
and the standards authorities were immediately alerted. 


How were the twins caught in the act? 
Keep reading for more clues... 


www.it-ebooks.info 


creating longer quotes 


Looooong quotes nom perenne: 


Sacraments ae 
Segeay'n LSA 


Le a ee Seg’ 


Now that you know how to do short quotes, let’s 


tackle long ones. Tony’s given us a long quote Lie See 
with the Burma Shave jingle. —™N, ee ee ~ 
In his journal, Tony just put the Burma Shave | July 14, 2012 

quote right inside his paragraph, but wouldn’t it | 

be better if we pulled this quote out into a “block” | Tow sont Burma Shave style signs.on the side of the rand 
of its own, like this: | eka: SEE cee oe Se eR ge Fee 


| ipa OP ciemiry.” Tdeinncly won't be passing any cars 


Hs 


| saw some Burma Shave style signs on the side 
of the road today: 


Passing cars, kx \ (Pee dov’t know what 


When You can’t see, k 
“Burma Shave’ slogans are, 
pia ee Il tell you all about 


A olimpse, 
of aaa them in just a few pages... 


Sos wea Goes, gry repr mm me ae, sha or 
ats Pht gyoard« Waratah 
Cs pmermry, | eva pee be pay ey, 


| definitely won't be passing any cars. 
ee ee 
Pakol el eet) age Boos feos pee eee 
ed ee 
geeeres bar, ket dm repeal Ab Ln Tre ‘ers Gare oid 


That’s where the <blockquote> element comes ikl aad ; 
in. Unlike the <q> element, which is meant for re 
short quotes that are part of an existing paragraph, 

the <blockquote> element is meant for longer 

quotes that need to be displayed on their own. 


It's important to use 
the right tool for the job, and 
the <blockquote> element is 
perfect for this job. 
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building blocks 


Adding a <blockquote> 


Let’s get a <blockquote> into Tony’s online journal. 


e Open your “journal.htm!” file and locate the July 14th 
entry. Rework the paragraph to look like this: 


To insert the <blockquote> . 
aa element, we need to end this 
<p> 


paragraph first. 
I saw some Burma Shave style signs on the 


side of the road today: . 
</p> Next we put the Burma Shave text in the 


<blockquote> nl <blockquote> element. 
PASSING] CEES, 
When you can't see, We also put each line of text on a 


ae ae oe a separate line so it reads more like a 
ee Burma Shave slogan. 
Of eternity. 
</blockquote> And finally, we need to add 
<p> <——___ tay bo start this 
I definitely won't be passing any cars. the <blockquote>. 
</p> 


a <p> 
paragraph after 


‘eo eS i = 
Sepway'n DSA 


y ; 7 . | i, op ea ed or oe hee 
Time for another test drive. Open “journal.html” in your browser ees 
and take a look at the results of your work: 


<blockquote> creates a | 
separate block (like <p> = am | 
does), plus it indents the ee CONSE Plo ew ~—— 
text a bit to make it | 
look more like a quote. July 14, 2012 


7 
dust: what we wante Tsaw sone Burma Shave style signs ot the side of dhe road today: 


Passing cars, When you can't see, May pet vou, A plimpes, Of 


But our quote isn t looking eRermity. 
ite like we wanted ven aad ‘amie wuieeey — 
af the \ines are ae 4 ki np any ' 
her. We really wante | 
a a different lines: June 2, 2012 
thmmm. Lets come bat 


that in a bit... 
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questions quotes 


Q: So let me see if | have this right: | 
use <q> when | just want to have some 
quote in with the rest of my paragraph, 
and | use <blockquote> when | have a 
quote that | want to break out on its own 
in my web page? 


A: You've got it. In general you'll use 
<blockquote> if you want to quote something 
that was a paragraph or more, while you can 
use <q> anytime you just want to throw ina 
quote as part of your running text. 


Q: Multiple paragraphs in a block 
quote? How do! do that? 


A: Easy. Just put paragraph elements 
inside your <blockquote>, one for each 
paragraph. Do try this at home. 


Q: How do | know what my quotes 

or block quotes will look like in other 
browsers? It sounds like they may handle 
it differently. 


A: Yes. Welcome to the World Wide Web. 
You don’t really know what your quotes will 
look like without trying them out in different 
browsers. Some browsers use double quotes, 
some use italics, and some use nothing at 
all. The only way to really determine how 
they'll look is to style them yourself, and we'll 
certainly be doing that later. 
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blockquotes 


thereyareno 
Dumb Questions 


0} | get that the <blockquote> element 
breaks its text out into a little block of 

its own and indents it, so why isn’t the 
<blockquote> inside the paragraph, just 
like the <q> element is? 


A: Because the <blockquote> really is like 
a new paragraph. Think about this as if you 
were typing it into a word processor. When 
you finish one paragraph, you hit the Return 
key twice and start a new paragraph. To type 
a block quote, you'd do the same thing and 
indent the quote. Put this in the back of your 
mind for a moment; it’s an important point 
and we're going to come back to it in a sec. 


Also, remember that the indenting is 

just the way some browsers display a 
<blockquote>. Some browsers might not use 
indentation for <blockquote>. So, don’t rely 
ona <blockquote> to look the same in all 
browsers. 


Q: Can | combine quote elements? 
For instance, could | use the <q> element 
inside the <blockquote> element? 


A: Sure. Just like you can put a <q> 
element inside the <p> element, you can 


put <q> inside <blockquote>. You might do 
this if you’re quoting someone who quoted 
someone else. But a <blockquote> inside a 
<q> doesn’t really make sense, does it? 
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Q: You said that we can style these 
elements with CSS, so if | want to make 
the text in my <q> element italics and 
gray, | can do that with CSS. But couldn’t 
| just use the <em> element to italicize my 
quotes? 


A: Well, you could, but it wouldn't be 

the right way to do it, because you'd be 
using the <em> element for its effect on the 
display rather than because you're really 
writing emphasized text. If the person you 
were quoting really did emphasize a word, or 
you want to add emphasis to make a strong 
point about the quote, then go right ahead 
and use the <em> element inside your quote. 
But don't do it simply for the italics. There 
are easier and better ways to get the look 
you want for your elements with CSS. 


building 


Solved: The Case of the Elements Separated at Birth 
How were the identical quote twins found to be imposters so quickly? 


As you’ve no doubt guessed by now, <q> and <blockquote> were 


discovered as soon as they went to work and began to 2 9 
mark up text. <q>’s normally unobtrusive little quotes Fiv e-Minute 
| Mystery 


were popping out into blocks of their own, while 
<blockquote>’s quotes were suddenly being lost inside 
regular paragraphs of text. In follow-up interviews with 
the victims of the pranks, one editor complained, “I lost 
an entire page of liner quotes thanks to these wackos.” After 

being reprimanded and sent back to their respective jobs, <blockquote> 
and <q> fessed up to their wives, who immediately left town together in a 
T-Bird convertible. But that’s a whole *nother story (it didn’t end well). 
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block and inline elements 


The real truth behind the <q> and <blockquote> mystery 


Okay, it’s time to stop the charade: <blockquote> and <q> are actually different types of elements. 
The <blockquote> element is a block element and the <q> element is an inline element. What’s the 
difference? Block elements are always displayed as if they have a linebreak before and after them, 
while inline elements appear “in line” within the flow of the text in your page. 


Block: stands on its own Inline: goes with the flow 


<hl>, <h2>, ... , <ho>, <p>, and <blockquote> are all block elements. <>, <a>, and <em> are inline elements. 


Each block element is ” 
displayed on its own, as 


Rater 
| h2 \ if it has a linebreak 
before and after it. <9>, on the other 
Rater 
Rater 


hand, like all 
re inline elements, is 
just. displayed in 
The flow of the 
paragraph it’s in 


Block elements 

E— separate 
content into 
blocks. 


blockquote 


Byam 


Remember: block elements stand on their own; 
inline elements go with the flow. 
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there are no es 
b Questions 


pum 


Q: | think | know what a linebreak is; it’s like hitting the carriage return 
on a typewriter or the Return key on a computer keyboard. Right? 


A: Pretty much. A linebreak is literally a “break in the line,” like 22 

this, and happens when you hit the Return key, or on some computers, the Enter 
key. You already know that linebreaks in HTML files don’t show up visually when 
the browser displays a page, right? But now you've also seen that anytime you 
use a block element, the browser uses linebreaks to separate each “block.” 


Once again, this all sounds great, 
but why is all this talk of linebreaks, 
blocks, and inline elements useful? Can 
we get back to web pages? 


Don’t underestimate the power of knowing how HTML 
works. You’re soon going to see that the way you combine 
elements in a page has a lot to do with whether elements 
are displayed as block or inline. We'll get to all that. 


In the meantime, you can also think about block versus 
inline this way: block elements are often used as the major 
building blocks of your web page, while inline elements 
usually mark up small pieces of content. When you’re 
designing a page, you typically start with the bigger 
chunks (the block elements) and then add in the inline 
elements as you refine the page. 


The real payoff is going to come when we get to 
controlling the presentation of HTML with CSS. If you 
know the difference between inline and block, you’re 
going to be sipping martinis while everyone else is still 
trying to get their layout right. 
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carriage returns and the <br> element 


I've been thinking 
about the Burma Shave lines. I wasn't 
surprised that they weren't broken up 
because we've said from the beginning 
that whitespace and linebreaks aren't 
displayed by the browser... 


..but the only way I can think of 
to fix this is to put each one in 
a block element like a paragraph. 
Otherwise, how can you get the 

browser to add linebreaks? 


What if you had an element whose 
only job was to give you a linebreak 
when you needed one? 


Wouldn’t that be nice? You’d actually be able to make 
the browser pay attention and insert some carriage 
returns for a change. 


Turns out there is an element, the <br> element, just 
for that purpose. Here’s how you use it: 


<h2>July 14, 2012</h2> 

<p> 
I saw some Burma Shave style signs on the 
side of the road today: 


</p> 
Heewte the dul <blockquote> i ns a <br> element to any line 
er 


ippet he Passing cars, <br> when you want to break the ; 
l4th smippe When you can't see, <br> flow and insert 3 “linebreak. 
Tony s page. 4 > Ma 
y get you, <br> 


A glimpse, <br> 

Of eternity. <br> 
</blockquote> 
<p> 

I definitely won't be passing any cars. 
</p> 
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Go ahead and add the <br> elements to Tony’s journal. After you 
make the changes, save the file, and give it a test drive. 


Decamenting my wip around the US on my very own Segway! 


A 20, 2012 
Here’s what the changes should gust 20, 


look like. Now it reads like a 
Burma Shave slogan should read! 


>, 


July 14, 2012 


Lew some Bum Shave style signe on ihe side of ihe mad Godiy: 


Passage Cars, 

Wien ¥0a1 Gan't see, 
May get you, 

A glimmse, 

OF cseminy. 


I definitely woot be passing any car 


June 2, 2012 


Each line now has a 
linebreak after it. 


My first day of the trip! I cant believe | finally got everything 
packed and ready to go, Because I'm on a Segway, | wasn’ able 
to bring a whole let with me: cellphone, iPod, digital camera, and 
aprotein bar. Jost the essentials. As Lao Tu would have said, 
“A journey of a thousand miles begins with one Segway." 
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void elements have no closing tag 


In Chapter 1 we said that an element 
is an opening tag + content + closing 
tag. So how is <br> an element? It doesn't 
have any content, and it doesn't even 
have a closing tag. 


Exactly. It doesn’t have any content. 


The <br> element is an element that doesn’t have any content. Why? 
Because it’s just meant to be a linebreak, nothing else. So, when an 
element doesn’t have any real content by design, we just use a shorthand 
to represent the element and it ends up looking like <br>. After all, if we 
didn’t have this shorthand, you’d be writing <br></br> every time you 
needed a linebreak, and how much sense does that make? 


<br> isn’t the only element like this; there are others, and we have a name y, 
for them: void elements. In fact, we’ve already seen another void element, 

the <img> element. We’ll be coming back to look at the <img> element in 
detail in a couple chapters. 


Keep in mind, the reason for the shorthand isn’t laziness so much as it is 
efficiency. It’s more efficient to represent void elements this way (efficient 
in typing, in the number of characters that end up in a page, and so on). 
In fact, after reading HTML for a while, you'll find that it is easier on 
your eyes too. 


Content? Hmm, the whole point of 
this element is to insert a linebreak. 
There's really no content. 


L 


x 


Here’s the opening tag; 


L 


<br> </br> 


L— me 
<br> </br> 


I'm half the 
element I used to 
be...(sniff sniff). 


_—_ then it really represents 


° the same thing. 


<br> 


(0) 
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typing this in is REALLY 
e know there’s never going to b 
any Content between those tags. 


They used 

to be called 
“empty 
elements,” 
which 
apparently 
made too 
much sense, so 
they renamed 
them to void. 
Personally, we 


still like empty. 


Here’s the tlosing tag, 


silly. 


e 


Yeah, if we just type this, 


there are 
Dumb 


Q: So, the only purpose of <br> is to insert a 
linebreak? 


A: Right; the only place the browser typically inserts 
breaks in your content is when you start a new block 
element (like <p>, <h1>, and so on). If you want to insert a 
linebreak into your text, then you use the <br> element. 


Q: Why is <br> called an “void” element? 


A: Because it has no content, as in 

element = opening tag + content + closing tag. So, it’s void 
because there’s no content and no closing tag. Think like 
the “void of space”; there’s nothing there, it’s empty. 


Q: | still don’t get it. Explain why the 
<br> element is “void”? 


A: Think about an element like <h1> (or <p> or <a>). 
The whole point of the element is to mark up some content, 
like: 


<hl>Don't wait, order now</hl1> 


With the <br> element, the point is just to insert a linebreak 
into your HTML. There is no content you are trying to mark 
up. We don’t need all the extra brackets and markup, so 
we just shorten it into a more convenient form. If you're 
thinking “void” is kind of a weird name, you're right: it 
comes from computer science and means “no value.” 


Q: Are there any other void elements? | think 
<img> must be a void element, too, right? 


A: Yes, there are a couple of them. You've already 
seen us use the <img> element, and we'll be getting to the 
details of this element soon. 


Q: Can | make any element void? For instance, if | 
have a link, and don’t want to give it any content, can | 
just write <a href=“mypage.html”> instead? 


building 


ne 


Questions 


: No. There are two types of elements in the world: 
normal elements, like <p>, <h1>, and <a>, and void 
elements, like <br> and <img>. You don't switch back 
and forth between the two. For instance, if you just typed 
<a href="mypage.html”>, that’s an opening tag without 
content or a closing tag (not good). If you write 
<a href=“mypage.html’></a>, that’s an empty element and 
is perfectly fine, but isn’t very useful in your page! 


Q: I've seen pages not with <br>, but with <br />. 
What does that mean? 


A: It means exactly the same thing. The syntax used 
in <br /> is a more strict syntax that works with XHTML. 
Wheneven you see <br />, just think <br>, and unless 
you're planning on writing pages compliant with XHTML 
(see the appendix for more information on XHTML), you 
should just use <br> in your HTML. 


Elements that don’t have 
any content by design 

are called void elements. 
When you need to use a 
void element, like <br> 

or <img>, you only use 

an opening tag. This is 

a convenient shorthand 
that reduces the amount of 
markup in your HTML. 
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we need a list for tony's site 


Meanwhile, back at Tony’s site... 


You’ve come a long way already in this chapter: you’ve 
designed and created Tony’s site, you’ve met a few new 
elements, and you've learned a few things about elements 
that most people creating pages on the Web don’t even 
know (like block and inline elements, which are really 
going to come in handy in later chapters). 


But you’re not done yet. We can take Tony’s site from 
good to great by looking for a few more opportunities to 
add some markup. 


Like what? How about lists? Check this out: 


There’s a list right here. Tony 
wrote the list of cities that 
he’s been through i in his August 


journal entry. 
ee | 


Wouldn’t it be great if we could mark up this text so the 
browser knows this text is a list? Then the browser could 
display the list items in a more useful way. Something like this: 


July 14, XZ 


Uw coms ecm far pcs ge old ry 


Pptaalay 
Well |'ve made it 1200 miles already, and ty ea ps pa 
| passed through some interesting places on June, 203 
the way: 
|. Walla Walla, WA 
2. Magie City, ID —=—_ Note that not only is 
3. Bountiful, UT this a list, but it’s an i fem anya awe ce ar Ca 
ordered list. Tony visited oa wade Bete a roa 
4. Last Chanee, CO these cities in a particular arse tin ees Near aL 


5. Why, AZ order. etl 


6. Truth or Consequences, NM 
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Remember, it's 
important to use the 
right tool for the job, and 

the <p> element is NOT the 
right tool for this job. 


building blocks 


Of course, you could use the <p> 
element to make a list... 


It wouldn’t be hard to make a list using the <p> element. 
It would end up looking something like this: 


<p> 


1. Red Segway Top two preferred 
</p> a colors Lo Segway: 
<p> 


2. Blue Segway 
</p> 


But there are lots of reasons not to. 


You should be sensing a common theme by now. You 
always want to choose the HTML element that is closest 
in meaning to the structure of your content. If this is a 
list, let’s use a list element. Doing so gives the browser and 
you (as you'll see later in the book) the most power and 
flexibility to display the content in a useful manner. 


oe WAIN 

-‘PQWER 
Why not use <p> to make lists? 
(Choose all that apply.) 


A. HTML has an element for lists. 
If you use that, then the browser 
knows the text is a list, and can 

display it in the best way possible. 


B. The paragraph element is really 
meant for paragraphs of text, not 
lists. 


C. It probably wouldn't look 
much like a list, just a bunch of 
numbered paragraphs. 


D. If you wanted to change the 
order of the list, or insert a new 
item, you’d have to renumber 

them all. That would suck. 


C8 ‘Dg ‘VP emsuy 
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Constructing HTML lists in two easy steps 


Creating an HTML list requires two elements that, when used together, 
form the list. The first element is used to mark up each list item. The 
second determines what kind of list you’re creating: ordered or unordered. 


Let’s step through creating Tony’s list of cities in HTML. 


Step one: 
Put each list item in an <li> element. 


To create a list, you put each list item in its own <1i> element, 
which means enclosing the content in an opening <1i> tag and 
a closing </1i> tag. As with any other HTML element, the 
content between the tags can be as short or as long as you like 
and broken over multiple lines. 


We've just: showing fragment of the std this HTML in your “journal.html” file and 
HTML from Tony's journal here. cep up with the Changes as we make them 


<h2>August 20, 2012</h2> 
<img src="images/segway2.jpg"> 
<p> 
Well I've made it 1200 miles already, and I passed 
through some interesting places on the way: 


First, move the list items outside of the paragraph. The 
</p> list is going to stand on its own. 


| . and then entlose each list item 
<li>Walla Walla, WA</1i> with an <li>, </li> set of tags. 


<1li>Magic City, ID</1li> 
<1i>Bountiful, UT</1li> 

<li>Last Chance, CO</1i> 

<li>Why, AZ</1i> 

<1i>Truth or Consequences, NM</1i> 


Each of these <li> 
elements will become 


Ss 
AS 
— an item in the list. 


<h2>July 14, 2012</h2> 

<p> 

I saw some Burma Shave style signs on the side of 
the road today: 


</p> 
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Step two: 
Enclose your list items with either the <ol> or <ul> element. 


If you use an <ol> element to enclose your list items, then 
the items will be displayed as an ordered list; if you use <ul>, 
the list will be displayed as an unordered list. Here’s how you 
enclose your items in an <ol> element. 


Again, we're just showing a Fragment of the 
HTML from Tony's journal here. 


<h2>August 20, 2012</h2> 
<img src="images/segway2.jpg"> 
<p> 
Well I've made it 1200 miles already, and I passed 
through some interesting places on the way: . 7? visited the 
to be an ordered list, because [ony v! 


hi . 
</p> > wheagee it order. So we use an <ol> opening tag, 


ities na Ss! cif 
as cities in a spe 
<1li>Walla Walla, WA</1i> 


<1i>Magic City, ID</li> All the list items sit in the 
£— middle of the <ol> element 


<1li>Bountiful, UT</1li> 
: and become its content. 


<li>Last Chance, CO</1i> 

<li>wWhy, AZ</1i> 

<1i>Truth or Consequences, NM</1i> 
</ol> <—~— And herve we close the <ol> element. 
<h2>July 14, 2012</h2> 
<p> 


I saw some Burma Shave style signs on the side of 
the road today: 


</p> 


‘ WALI 
PQW ER 


Is <ol> a block element or inline? What about <1i>? 
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wt Taking a test drive through the cities 


Ue el Arian tee are = Make sure you’ve added all the HTML for the list, reload your 
SE ae “Journal.html” file and you should see something like this: 

‘Segway'n USA 

oe ay eg rmind aie U5 en oy vey oe Seaeny! 


Ampust 20, 2012 Here's the new and 
: improved list of cities. 


a _ 


Well I made it 1200 miles already, and I passed through some 


Peewee SEES Ree On Mie Wey: There's a linebreak before the list 
| starts, so <ol> must be a block element. 
i 1, Walla Walla, WA 
4. La i 
; *y +B Bountiful, UT QK. But there’s also a linebreak after each 
_— 4, Last Chance, CO item, so <li> must be a block element tool 
my 5. Why, AZ 
why: 6. Truth or Consequences, NM 
Ia 
My Ger Fou, wr 
a Ellmpee, . es Cave 
5 tiee that the browser 
ena Ye automatically numbering eath list 
| | etinincty weer be pacewinge aay care item (so you don’t have to). 


June 2, 2012 


Rare" yr pe 


It turns out To 

te NY actual 
visited Arizona after Ne 
Mexico. Can you rework 


the list so the 
: numberi 
istearracrs ering 


elle Cran dlary cof! chee ofp | cent believe [filly ane everythiag 
paced ond eae io po. Dose Pm on Segeey. | woah | 
fo bring a whole bot ait me cellphone, (Pod digial comer and | 
aptem bar, Jee the eeentials, Aa Lip Teo wield hae pa, 
“A (meyer eles begins wh one Seger.” 
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Here’s another list from Tony’s journal: cell phone, iPod, digital camera, and a protein 
bar. You'll find it in his June 2nd entry. This is an unordered list of items. 


The HTML for this entry is typed below. Go ahead and add the HTML to change the 
items into an HTML unordered list (remember, you use <u1> for unordered lists). 
We've already reformatted some of the text for you. 


When you've finished, check your answers in the back of the chapter. Then make 
these changes in your “journal.html’ file and test. 


<h2>June 2, 2012</h2> 
<img src="segwayl.jpg"> 
<p> 


My first day of the trip! I can't believe I finally got 


everything packed and ready to go. Because I'm on a Segway, 


I wasn't able to bring a whole lot with me: 


cell phone 
iPod 
digital camera 


and a protein bar 


Just the essentials. As 


Lao Tzu would have said, <q>A journey of a 


thousand miles begins with one Segway.</q> 
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Q: Do | always have to use <ol> and <li> together? 


A: Yes, you should always use <ol> and <li> together (or <ul> and 
<li>), Neither one of these elements really makes sense without the 
other. Remember, a list is really a group of items: the <li> element 

is used to identify each item, and the <ol> element is used to group 
them together. 


Q: Can | put text or other elements inside an <ol> or <ul> 
element? 


A: No, the <ol> and <ul> elements are designed to work only with 
the <li> element. 


Q: What about unordered lists? Can | make the bullet look 
different? 


A: Yes. But hold that thought. We'll come back to that when we're 
talking about CSS and presentation. 


Q: What if | wanted to puta list inside a list? Can | do that? 


A: Yes, you sure can. Make the content of any <li> either <ol> or 
<ul>, and you'll have a list within a list (what we call a nested list). 


<ol> 
<li>Charge Segway</li> Nested list 
<li>Pack for trip 


<ul> Here's the 
<li>cell phone</1li> <li>. [t 
<li>iPod</1li> encloses 


<li>digital camera</1i> )the nested 
<li>a protein bar</1li>” list. 
</ul> 
</li> 
<li>Call mom</1i> 
</ol> 
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Q: | think | basically understand how block elements and 
inline elements are displayed by the browser, but I’m totally 
confused about what elements can go inside other elements, or, 
as you say, what can be “nested” inside of what. 


A: That’s one of the hardest things to get straight with HTML. This 
is something you're going to be learning for a few chapters, and we'll 
show you a few ways to make sure you can keep the relationships 
straight. But we're going to back up and talk about nesting a little 
more first. In fact, since you brought it up, we'll do that next. 


Q: So HTML has ordered and unordered lists. Are there any 
other list types? 


A: Actually, there is another type: definition lists. A definition list 


looks like this: Each item in the list 
has a term, <dt>, and 
<dl> a description, <dd>. 


<dt>Burma Shave Signs</dt> 

<dd>Road signs common in the U.S. in 
the 1920s and 1930s advertising shaving 
products.</dd> 

<dt>Route 66</dt> 

<dd>Most famous road in the U.S. 


system.</dd> 
ca Type this in and 


</dl> 
give it a try. 


Q: Burma Shave? 


A: Burma Shave was a company that made brushless shaving 
cream in the early part of the 20th century. They began advertising 
their product using roadside signs in 1925, and these signs proved to 
be very popular (if somewhat distracting for drivers). 


highway 


The signs were grouped in bunches of four, five, or six, each with one 
line from the slogan. At one point, there were 7,000 of these signs 

on roadsides throughout the United States. Most are gone now, but 
there are still a few left, here and there. 
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Putting one element inside 
another is called “nesting” 


When we put one element inside another element, we 
call that nesting. We say, “the <p> element is nested 
inside the <body> element.” At this point, you’ve 
already seen lots of elements nested inside other 
elements. You’ve put a <body> element inside an 
<html> element, a <p> element inside a <body> 
element, a <q> element inside a <p> element, and 

so on. You’ve also put a <head> element inside the 
<html> element, and a <title> element inside the 
<head>. That’s the way HTML pages get constructed. 


The more you learn about HTML, the more 
important having this nesting in your brain becomes. 
But no worries—before long you'll naturally think 
about elements this way. 


<9> nested inside <p>, 
nested inside <body>, 
nested inside <html>. 
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understanding nesting by drawing 


To understand the nesting 
relationships, draw a picture a 


<head> 


; : ; <title>Musings</title> 
Drawing the nesting of elements in a web 


</head> 
page 1s kind of like drawing a family tree. At <body> 
the top you've got the great-grandparents, <p> 
and then all their children and grandchildren To quote Buckaroo, 
below. Here’s an example... <qeThe only reason 
for time is so 
Simple web page that everything 
doesn't happen 
at once.</q> 
</p> 
</body> 
</html> 


Let’s translate this 
into a diagram, where 
each element becomes a 

box, and each line connects 
the element to another element 
that is nested within it. 


<html> is always the 
element at the root 
the tree. 


<html> has two nested 
elements: <head> and 
<body>. You tan ¢all them 


both “children” of <html>. <body> is nested within the <html> 


element, so we say <body> is the 
[ “ehild” of <html>. 


S 


Zs The parent of <9> is <p>, 
the parent of <p> is <body>, and 


the parent of <body> is <html>. 


<title> is nested within 
the <head> element. 


= 4 
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building blocks 


Using nesting to make sure your tags match 


Your first payoff for understanding how elements are nested is that 
you can avoid mismatching your tags. (And there’s gonna be more 
payoff later; just wait.) 


What does “mismatching your tags” mean and how could that SAFETY FIRST. 
happen? Take a look at this example: 


| Properly 
nest | 


oath your 
eres how this HTML looks; 
<em> is nested inside oe ; elements 


| em 


<p>I'm so going to tweet <em>this</em></p> 


So far, so good, but it’s also easy to get sloppy and write some HTML 
that looks more like this: 


WRONG: the <p> tag 


h > 
<p>I'm so going to tweet <em>this</p></em> in) Wl 


Ky is supposed to be inside 
the <p> element. 


Given what you now know about nesting, you know the <em> element 
needs to be nested fully within, or contained in, the <p> element. 


X goon: here the <em> element is cone here the <em> element has leaked outside of the 
nested inside the <p>. <p> element, which means it’s not properly nested inside it. 
So what? 


It’s okay to mess up your nesting if you like playing Russian roulette. If you write HTML 
without properly nesting your elements, your pages may work on some browsers but not 
on others. By keeping nesting in mind, you can avoid mismatching your tags and be sure 
that your HTML will work in all browsers. This is going to become even more important 
as we get more into “industrial strength HTML?” in later chapters. 
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catching mismatch¢ 


<html> 
<head> 


<title>Top 100</title> 


<body> 
<hl>Top 100 


<h2>Dark Side of the Moon</h2> 


<h3>Pink Floyd</h3> 


<p> 


<ul> 


</ul 
</p> 


BE the Browser 


Below, you’]] find an HTML file 

. with some mismatched tags in it. 
_. Your job is to play like you're the 
browser and locate al] the errors. 

After you've done the 
Re exercise, look at the 
end of the chapter to 
see if you caught al] 
the errors. 


There's no dark side of the moon; matter of fact <q>it's all dark. 
</p></q> 


<1i>Speak to Me / Breathe</1li> 
<1i>On The Run</1li> 


<1i>Time</1i> 


<li>The Great Gig in The Sky</li> 


<1i>! 


<1i>Us And Them</em> 
<1i>Any Colour You Like</1i> 
<1i>Brain Damage</1li> 


oney</1i> 


<1i>Eclipse</1li> 


> 


<h2>XandY</h3> 
<h3>Coldplay</h2> 


<ol> 


</ul 
</bo 
</he 


110 


<1li>Square One 
<1li>What If? 
<1li>White Shadows 
<1i>Fix You 
<1i>Talk 
<1i>Xandy 


<1li>Speed of Sound 


<1i>A Message 
<1i>Low 
<li>Hardest Part 


<1i>Swallowed In The Sea 


<1i>1 
> 
dy> 
ad> 


[Twisted Logic 
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A bunch of HTML elements, in full costume, are playing a party 
game, “Who am |?” They'll give you a clue—you try to guess who 
they are based on what they say. Assume they always tell the 
truth about themselves. Fill in the blanks to the right to identify 
the attendees. Also, for each attendee, write down whether or not 
the element is inline or block. 


Tonight's attendees: 


Any of the charming HTML elements you've seen so far just 
might show up! 


I'm the #1 heading. 


I’m all ready to link to another page. 


Emphasize text with me. 


I'm a list, but | don’t have my affairs in order. 


I’m a real linebreaker. 


I’m an item that lives inside a list. 


| keep my list items in order. 


I’m all about image. 


Quote inside a paragraph with me. 


Use me to quote text that stands on its own. 
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Name 


building 


Who am J? 


Inline or 
block? 


411 


character entities are for special characters 


this book, and I wanted to mention the <html> 


I was just creating a web page 
explaining everything I was learning from 


element inside my page. Isn't that going to 
mess up the nesting? Do I need to put double 
quotes around it or something? 


You’re right, that can cause problems. 


Because browsers use < and > to begin and end tags, using them in 
the content of your HTML can cause problems. But HTML gives 
you an easy way to specify these and other special characters using 
a simple abbreviation called a character entity. Here’s how it works: 
for any character that is considered “special” or that you’d like to 
use in your web page, but that may not be a typeable character 

in your editor (like a copyright symbol), you just look up the 
abbreviation and then type it into your HTML. For example, the > 
character’s abbreviation is &gt; and the < character’s is &1t;. 


So, say you wanted to type “The <htm1> element rocks.” in your 
page. Using the character entities, you’d type this instead: 


The &lt;html&gt; element rocks. 


Another important special character you should know about is the 
& (ampersand) character. If you’d like to have an & in your HTML 
content, use the character entity amp; instead of the & character 
itself. 


So what about the copyright symbol (that’s &copyright;)? And 
all those other symbols and foreign characters? You can look up 
common ones at this URL: 


http://www.w3schools.com/tags/ref entities.asp 
or, for a more exhaustive list, use this URL: 


http: //www.unicode.org/charts/ 
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Q: Wow, | never knew the browser 
could display so many different 
characters. There are a ton of different 
characters and languages at the 
www.unicode.org site. 


A: Be careful. Your browser will only 
display all these characters if your computer 
or device has the appropriate fonts installed. 
So, while you can probably count on the 
basic entities from the www.w3schools.com 
page to be available on any browser, there is 
no guarantee that you can display all these 
entities. But, assuming you know something 
about your users, you should have a good 
idea of what kind of foreign language 
characters are going to be common on their 
machine. 


thereyare no ” 
Dumb Questions 


Q: You said that & is special and | 
need to use the entity &amp; in its place, 


but to type in any entity | have to use a &. 


So for, say, the > entity, do | need to type 
&amp;gt;? 


A: No, no! The reason & is special is 
precisely because it is the first character of 
any entity. So, it's perfectly fine to use & in 
your entity names, just not by itself. 


Just remember to use & anytime you type in 
an entity, and if you really need an & in your 
content, use &amp; instead. 


building 


Q: When | looked up the entities at the 
www.wscschools.com, | noticed that each 
entity has a number too. What do | use 
that for? 


A: You can use either the number, like 
&#100 or the name of an entity in your HTML 
(they do the same thing). However, not all 
entities have names, so in those cases your 
only choice is to use the number. 


Crack the Location Challenge 


Dr. Evel, in his quest for world domination, has put up a private web page to be 
used by his evil henchmen. You've just received a snippet of intercepted HTML 
that may contain a clue to his whereabouts. Given your expert knowledge of 

HTML, you've been asked to crack the code and discover his location. Here’s a 
bit of the text from his home page: 


There's going to be an evil henchman meetup 


next month at my underground lair in 


&#208; &epsilon; &tau; &#114; &ouml; &igrave; &tau;. 
Come join us. 


Hint: visit http://www.w3sthools.com/tags/ref_entities.asp 
and/or type in the HTML and see what your browser displays. 
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tasting a few elements 


<em> 


Use this element to 
mark up text youd 
say ina different 

voice, like if you are 
emphasizing a point. 


E eme. éstrong7 Use this element to mark up 
text you want emphasized 
So with extra strength. 
Use this element for 
<pr e> formatted text when you want 
the browser to show Your text 
exactly as you typed it. 


Whenever you want to 
make a link, you'll need 
the <a> element. 


-— 


Use this element for eve 
uotes...you know, like “to be 
: not vf be,” or “No matter 


where You 90) there you are.” 


Q LGZ 


<time> 


‘Gi This element tells the 
browser that the content is 


a date or time, or both. 


a Sul> 


Need to display a list2 Say, a list of 


ingredients in a vee 
Use the <uls bce: or a to-do list? 


A void element for 
making linebveaks. 


Lor7 


This is an element 
{ for in¢luding an 
_ image, like a photo, 
ce ZimMsg in Your page. 
; Np. IN 
Just give me a 


paragraph, please: If you need an 


<ol> ordered list instead, 


use the <ol> element. 
The code element is used 
for displaying tode from a 
computer Program. 


chocolate 
chocolate syrr™ 


This is for lengthy quotations— 
something that You want to 
highlight as a longer passage, say, 
from a book. 


V e7 
ot 


Here are a bunch of elements you 


already know, and a 
few you don’t. 


Remember, half the fun of HTML 
is experimenting! So make some 
files of your own and try these 


out. 
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Rockin’ page. It's perfect for 
my trip and it really does a good job of 
providing an online version of my journal. 

You've got the HTML well organized too, so 

T should be able to add new material myself. 
So, when can we actually get this of f your 
computer and onto the Web? 


Qe POINTS 


Plan the structure of your web pages before you = 
start typing in the content. Start with a sketch, 


then create an outline, and finally write the = Ole Beenie Nano me coeur 


HTML. = Avoid element consists of only one tag. 
= Plan your page starting with the large, block = An “empty” element has no content. But it does 
elements, and then refine with inline elements. have both opening and closing tags. 


= Remember, whenever possible, use elements to ™ Anested element is an element contained 
tell the browser what your content means. completely within another element. If your 
elements are nested properly, all your tags will 


= Always use the element that most closely match correctly 


matches the meaning of your content. For 
example, never use a paragraph when you = You make an HTML list using two elements in 
need a list. combination: use <ol> with <li> for an ordered 


. list; use <ul> with <li> for an unordered list. 
= <p>, <blockquote>, <ol>, <ul>, and <li> are 


all block elements. They stand on their own = When the browser displays an ordered list, it 
and are displayed (by default) with a linebreak creates the numbers for the list so you don’t 
above and below the content within them. have to. 


m= = =<q> and <em> are inline elements. The content = Youcan build nested lists within lists by putting 
in these elements flows in line with the rest of <ol> or <ul> elements inside your <li> elements. 


the content in the containing:element. = Use character entities for special characters in 


= Use the <br> element when you need to insert your HTML content. 
your own linebreaks. 
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right brain 
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HTMLecross 


Across 

1. Tony’s transportation. 

8. Famous catchy road signs. 
10. <q> is this type of element. 
11. Another void element. 

13. Element without content. 


14. Major building blocks of your pages. 


15. Use <ol> for these kinds of lists. 


It’s time to give your right brain a break and put that left brain to work: all the 
words are HTML-related and from this chapter. 


Down 

2. Left together in a T-bird. 

3. Max speed of a Segway. 

4. Tony won't be doing any of this. 

5. Putting one element inside another is 
called this. 

6. Requires two elements. 

7. Block element for quotes. 

9. Use <ul> for these kinds of lists. 

12. Void elements have none. 
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} Here's the rework of Tony’s Lao Tzu quote using the <q> element. Did 
1) you give your solution a test drive? 


Lution 


Here's the part that changes... 


<p> 
My first day of the trip! I can't believe I finally got 
everything packed and ready to go. Because I'm ona 


Segway, I wasn't able to bring a whole lot with me: 


We've added the <9> opening, 


cell phone, iPod, digital camera, and a protein bar. Just h 
. : a : . Z tao before the start 4 ta 
the essentials. As Lao Tzu would have said, <q>A journey quote and the </9> closing ta4, 
of a thousand miles begins with one Segway.</q> at the very end. 
</p> Notice that we also 


removed the double quotes- 


And here's the test drive... gia 


| - — Th 


Okay, it doesn't LOOK aw 


; My first day of the trip! I can't believe I finally pot everything 
dif erent, but don + You EEL packed and ready to go. Because I'm on a Segway, | wasn't able 
better now? to bring @ Whole lot with me: cellphone, iPod, digital camera, 
N Ls and a protcin bar, Just the essentials. As Luo Tzu would have =|) 


said, ‘A journey of a thousand miles begins with one Segway." 


Mi 
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Here’s another list from Tony’s journal: cell phone, iPod, digital 
camera, and a protein bar. You'll find it in his June 2 entry. This is an 
unordered list of items. 


Make these changes in your “journal.html’ file, too. Does it look like 
you expected? 


<h2>June 2, 2012</h2> 
<img src="segwayl .jpg"> 


<p> 
My first day of the trip! I can't believe I finally got 
everything packed and ready to go. Because I'm on a Segway, 
I wasn't able to bring a whole lot with me: 
ene << First, end the previous paragrarh 
<1i>cell phone</1i> = Start the unordered list 
<1i>iPod</1i> a Put each item into an <li> element. 
<1li>digital camera</1li> 
<li>and a protein bar</li> Ps the unordered list. 
</ul> ag 
<p> <—__—— find we need to 
Just the essentials. As et eo Paragraph 
Lao Tzu would have said, <q>A journey of a 
thousand miles begins with one Segway.</q> 
</p> 
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BE the Browser 


Solution 


<html> . 
<head> los 6 
bo > Closind 
<title>Top 100</title> Missing, </head 
<body> 
<hl>Top 100 < —__— Missing </hl> closing tag 


<h2>Dark Side of the Moon</h2> 
<h3>Pink Floyd</h3> 


<p> 
There's no dark side of the moon; matter of fact <q>it's all dark. 

: —— a <S _s <p> and <9> are not nested 
<1i>Speak to Me / Breathe</1i> properly: the </p> tag should 
<1i>On The Run</1li> tome after the </a> tao, 
<1i>Time</1i> 
<li>The Great Gig in The Sky</li> : re we 
<1i>Menay</1i> We have a closing ch gine wee € 
<1i>Us And Them</em> ~~ ould have a closing </li> tag, 


<1i>Any Colour You Like</1li> 
<1li>Brain Damage</li> 


: : , 
Raaiiciae aus aad Here's a Closing </p> that doesn t 


</ul> 
</p> — match any opening <P> tag, 


<h2>XandY</h3> : . 
<h3>Coldplay</h2> <———. We mixed up the closing </h2> and </h3> tags on these headings. 


<or eaapsquare One We started an <ol> list, but it’s 
<li>what If? matched with a closing </ul> tag, 
<1li>White Shadows 
<1i>Fix You 
<li>Talk <A. We've missing, all our 
<1i>Xandy closing, </\i> tags. 
<1li>Speed of Sound 
<1i>A Message 
<1i>Low 
<li>Hardest Part 
<1i>Swallowed In The Sea 
<1li>Twisted Logic 
: ul> < This doesn’t match the opening <ol> tag at the start of the list above. 
</body> 
</head> Z—_ Here's our missing </head> tag, but we're missing a Closing </html> tag, 
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A bunch of HTML elements, in full costume, are playing a party 
game “Who am |?” They gave you a clue—you tried to guess 


who they were based on what they said. 


Tonight's attendees: 


Quite a few of the charming HTML elements you've seen so far 


showed up for the party! 


I’m the #1 heading. 


I’m all ready to link to another page. 


Emphasize text with me. 


I'm a list, but | don’t have my affairs in order. 


I’m a real linebreaker. 


I’m an item that lives inside a list. 


| keep my list items in order. 


I’m all about image. 


Quote inside a paragraph with me. 


Use me to quote text that stands on its own. 
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Inline or a 
mm, Iv loo 
block? like an inline, 
BUT <a> ean 
wrap block 


elements, not 
block just text. So, 
reeeecis ast ck Va Mcgendhig ox 
the context, 
<a> can be 
either inline or 


inline = bec 
se eeeeeeeecesees Stumped? 


<br> is in limbo 


block land between 


Sesassdedeveseces block and inline. 


eee ecccecccccce 


It does ereate 
h i a linebreak, 
mum... but doesn't 
HG has teal a bit 
of text wd 
two separate 
block blocks, like if 


you had two <P> 


block elements. 


— : we 
a a Iked abou 
inline ~ °c ai 
yet, but, yes, 


H H <imo> is inline. 

inline Give it some 

Ta ressaeeesaeice icatht and 
we'll ome 

block . back to this in 
Chapter 9. 


building 
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a 
Crack the Location Challenge 


aval lami 
There's pode in be en ev enchm mectp next mocha 
You could have looked up each entity amy underground lar in Eeccatine. Come jnin ws. 


or typed them in. In either case, the 


answer looks like Detroit! Se 


There's going to be an evil henchman meetup 
next month at my underground lair in 

&#208; &epsilon; étau; &#114; &ouml; &éigrave; 
&tau;. Come join us. 
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4 setting connected 


ag 
A Trip to Webville , 


We're going 
to Webville! We're 
leaving our dusty ol' local 
filesystem behind for good. 


Web pages are a dish best served on the Internet. 
So far you’ve only created HTML pages that live on your own 
computer. You’ve also only linked to pages that are on your own 
computer. We’re about to change all that. In this chapter we'll 
encourage you to get those web pages on the Internet where all 
your friends, fans, and customers can actually see them. We'll also 
reveal the mysteries of linking to other pages by cracking the code 
of the h, t, t, p, :, /, /, w, w, w. So, gather your belongings; our next 
stop is Webville. 

WARNING: once you get to Webville, you may never come back. 
Send us a postcard. 
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getting on the web 


Remember me from 
way back in Chapter 1? You 
were going to get the Starbuzz 
website online so our customers 
could actually see it. 


Getting Starbuzz (or yourself) 
onto the Web 


You're closer to getting Starbuzz—or even better, your own site— 
on the Web than you might think. All you need to do is find a 
“web hosting company” (we’ll call this a “hosting company” from 
now on) to host your pages on their servers, and then copy your 
pages from your computer to one of those servers. 


Of course it helps to understand how your local folders are going 
to “map” to the server’s folders, and once you put your pages 

on the server, how you point a browser to them. But we'll get to 
all that. For now, let’s talk about getting you on the Web. Here’s 
what you’re going to need to do: 


1) Find yourself an hosting company. 


Choose a name for your site (like 
www.starbuzzcoffee.com). 


computer to a server at the hosting 


3 Find a way to get your files from your 
company (there are a few ways). 


Point your friends, family, and fans 
to your new site and let the fun 
begin. 


We’re going to take you through each of these steps, and even 
if you’re not going to set up a website online ght now, follow 
along because you'll learn some important things you'll need 


to know later. So, get ready for a quick detour from HTML... 
A Web Detour 
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A Web Detour 


a a a 
Finding a hosting company One-minute hosting guid 
To get your pages on the Web, you need a server that ; 
actually lives on the Web /udl-tme. Your best bet is to find We can't tell you everything you need to know 
a hosting company and let them worry about the details about getting a hosting company (after all, 
of keeping a server running, No worries, though; finding a this book is about HTML and CSS), but we’re 
hosting company is fairly straightforward and inexpensive. going to give youa good push in the right 
Which company? Well, we’d dove to sign you up for web direction. Here are some features to think 
hosting at Head First Hip Web Hosting, Inc., but that about while you’re shopping. 


doesn’t really exist. So, you’re going to have to do a little = Technical support: Does the hosting 


company have a good system for handling 
your technical questions? The better ones 


homework on your own. While finding a company to host 
your pages isn’t difficult, it’s kind of like choosing a cable 
TV company: there are lots of options and plans. You really 


have to shop around for the best deals and for the service will answer your questions quickly either 
that works for you. over the phone or via email. 

The good news is that you should be able to get started for = Data transfer: This is a measure of the 
almost nothing out of your pocket, and you can always amount of pages and data the hosting 
upgrade later if you need additional features. While we company will let you send to your visitors 
can’t suggest a particular provider, we can tell you a few during a given month. Most hosting 


things to look for in a provider, and we also list a few of the companies offer reasonable amounts of 


data transfer for small sites in their most 
basic plans. If you're creating a site that 
you expect will have lots of visitors, you 
may want to carefully look into this. 


more popular providers at: 
http://wickedlysmart.com/hosting-providers/ 


= Backups: Does the hosting company 
regularly make a backup of your pages 
and data that can be recovered in the event 
that the server has a hardware failure? 


You don’t have to ; Domain names: Does the hosting 
get your ee “~ company include a domain name in its 
Ss. Aa 
Relax the uae - — pricing? More about these on the next page. 
this book. 


Reliability: Most hosting companies report 
keeping websites up 99% of the time or 
better. 


While it’s a lot more fun if your be i 
are actually on the Web, you can ynis , 
the rest of this book by working on 
your own computer. 


follow along for the next 
how everything 


Goodies: Does your package include 
other goodies such as email addresses, 
forums, or support for scripting languages 
(something that may become important to 
you in the future)? 


Tn either case, 
few pages so you know 
fits together. 
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domain 
HELLO, my‘name is... 


Even if you’ve never heard of a domain name, you’ve seen and used a 
zillion of them; you know...google.com, facebook.com, amazon.com, 
disney.com, and maybe a few you wouldn’t want us to mention. 


So what is a domain name? Just a unique name that is used to locate 
your site. Here’s an example: 


This part is the domain name. 


—_—_—- I”I047#@ [Tuc 
www.Starbuzzcoffee.com 
Aa “yr 


There are different domain “endin 


This part is the for different Purposes: .Com, .org, - 
name of a specific .edu; and also for diflocent is ) 
server [N the co.uk, Co.\p, and so on. When choosing a 
domain. domain, pick the one that best fits you. After years of 


struggling, we finally 
have our very own 


There are a couple of reasons you should care about domain domain name. 


names. If you want a unique name for your site, you’re going to 
need your own domain name. Domain names are also used to link 
your pages to other websites (we’ll get to that in a few pages). 


There 1s one other thing you should know. Domain names are 
controlled by a centralized authority ICANN) to make sure that 
only one person at a time uses a domain name. Also (you knew it 
was coming), you pay a small annual registration fee to keep your 
domain name. 


How can you get a domain name? 


The easy answer is to let your hosting company worry about it. 
They'll often throw in your domain name registration with one of 
their package deals. However, there are hundreds of companies 
that would be glad to help—you can find a list of them at: 


http://www.internic.net/regist.html 


As with finding a hosting company, we’re afraid we’ll have to leave 
you to find and register your own domain name. You'll probably 
find that going through your hosting company is the easiest way to 
get that done. 
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Q: Why is it called a “domain name” 
rather than a “website name”? 


A: Because they are different things. If 
you look at www.starbuzzcoffee.com, that’s a 
website name, but only the “starbuzzcoffee. 
com” part is the domain name. You could 
also create other websites that use the same 
domain name, like corporate.starbuzzcoffee. 
com or employees.starbuzzcoffee.com. So 
the domain name is something you can use 
for a lot of websites. 


Q: If | were going to get the domain 
name for Starbuzz, wouldn’t | want to 

get the name www.starbuzzcoffee.com? 
Everyone seems to use websites with the 
www at the front. 


there are no 5 
Dumb Questions 


A: Again, don’t confuse a domain name 
with a website name: starbuzzcoffee.com is 
a domain name, while www.starbuzzcoffee. 
com is the name of a website. Buying a 
domain is like buying a piece of land; let’s 
say, 100mainstreet.com. On that land, 

you can build as many websites as you 
like, for example: home. 100mainstreet. 
com, toolshed.100mainstreet.com, and 
outhouse. 100mainstreet.com. So www. 
starbuzzcoffee.com is just one website in the 
starbuzzcoffee.com domain. 


Q: What’s so great about a domain 
name anyway? Do | really need one? My 
hosting company says | can just use their 
name, www.dirtcheaphosting.com? 


A Web Detour 


A: If that meets your needs, there is 
nothing wrong with using their name. But 
(and it’s a big but) here’s the disadvantage: 
should you ever want to choose another 
hosting company, or should that hosting 
company go out of business, then everyone 
who knows your site will no longer be able to 
easily find it. If, on the other hand, you have 
a domain name, you can just take that with 
you to your new hosting company (and your 
users will never even know you've switched). 


Q: If domain names are unique, that 
means someone might already have mine. 
How can | find out? 


A: Good question. Most companies that 
provide registration services for domain 
names allow you to search to see if a name is 
taken (kind of like searching for vanity license 
plates). You'll find a list of these companies at 
http://www. internic.net/regist.html. 


) 
Here's an exercise you really need to 90 off and do on your own. We d love 


feeding the cat while you're on vacation is probably out too). 


a to personally help, but there's only so much You can ask of book authors (and 


DO try this at home 


It’s time to seek out a hosting company and grab a domain name for your site. Remember, you can 
visit Wickedly Smart for some suggestions and resources. Also remember that you can complete the 
book without doing this (even though you really should!). 


My Web Hosting Company: 


My Domain Name: 


www.it-ebooks.info 
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A Web Detour 


Moving in 


Congratulations! You’ve got your hosting company 
lined up, you’ve found a domain name, and you’ve 
got a server all ready for your web pages. (Even 

if you don’t, keep following along because this is 
important stuff.) 


Now what? Well, it’s time to move in, of course. 

So, take that For Sale sign down and gather up all 
those files; we’re going to get them moved to the 
new server. Like any move, the goal is to get things 
moved from, say, the kitchen of your old place to 
the kitchen of your new place. On the Web, we’re 
just worried about getting things from your own root 
folder to the root folder on the web server. Let’s get 
back to Starbuzz and step through how we do this. 
Here’s what things look like now: 


Here's the root folder. 


Your computer, where the 
Starbuzz pages eurrently live 


Here's the new website name. We've 


using the starbuzzoffee.com 


domain (sinte we beat you to it, 
you'll have to use your own domain 


name instead). 
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Vv 


Remember Your 
Starbuzz pages? There 
are two: the main page 
(index.html) and the 
page that contains 
the mission statement 
(mission. html). 


Here's the new web server. The 
hosting company has already 
treated a root folder for You, 


which is where all your pages 
a are going to go. a 
= 


www.starbuzzcoffee.c 
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Q: Wait a sec, what’s the “root folder” 
again? 


A: Up until now, the root folder has 

just been the top-level folder for your 
pages. On the web server, the root folder 
becomes even more important because 
anything inside the root folder is going to be 
accessible on the Web. 


Q: My hosting company seems to 
have called my root folder 


A Web Detour 
thereyareno 
Dumb Questions 


A: Not at all. Hosting companies call root A: Exactly. You're going to take all the 
folders lots of different things. The important pages on your own computer, and put 
thing is that you know where your root folder — them all inside your site’s root folder on the 
is located on the server, and that you can hosting company server. 

copy your files to it (we'll get to that in a sec). 


: Q: What about subfolders, like the 
Q: So let me make sure | understand. “images” folder? Do | copy those too? 
We’ve been putting all our pages for the 
site in one folder, which we call the root 
folder. Now we're going to copy all that 


over to the server’s root folder? 


= Yes, you're basically going to replicate 
all the pages, files, and folders in your own 
root folder onto the server. So if you’ve got 
an “images” folder on your computer, you'll 


“mydomain_com”. Is that a problem? have one on the server too. 


Getting your files to the root folder 


You’re now one step away from getting Starbuzz Coffee on the Web: 
you've identified the root folder on your hosting company’s server 


The files are sitting 


and all you need to do 1s copy your pages over to that folder. But how 
on Your computer. 


do you transfer files to a web server? There are a variety of ways, 
but most hosting companies support a method of file transfer called 
FTP, which stands for File Transfer Protocol. You’ll find a number 
of applications out there that will allow you to transfer your files via 
FTP; we'll take a look at how that works on the next page. 


Here’s the root 
Colder on the server: 


_ B85 
a8 


mission.html 


You need to transfer them 
Lo the server, and then 
they'll be “live” on the Web. 


www.starbuzzcof fee: 
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A Web Detour 


As much FTP as you can possibly fit in two pages 


Seriously, this really is an HTML and CSS book, but we didn’t want to leave you up a creek 
without a paddle. So, here’s a very quick guide to using FTP to get your files on the Web. Keep 
in mind your hosting company might have a few suggestions for the best way to transfer your files 
to their servers (and since you are paying them, get their help). After the next few pages, we’re off 
our detour and back to HTML and GSS until we reach the end of the book (we promise). 


We'll assume you’ve found an FTP application. Some are command-line driven, some have 
complete graphical interfaces, and some are even built into applications like Dreamweaver and 
Expression Web. They all use the same commands, but with some applications you type them in 
yourself, while in others you use a graphical interface. Here’s how FTP works from 10,000 feet: 


To connect, you'll need a e 
username and password supplied The words “folder 


@) First, connect to your server using FTP. by your hosting Company. and “directory” are 
interchangeable. Most 


WA aa FTP applications use 
ftp www.starbuzzcoffee.com the word “directory.” 


| | starbuzz | 


www.starbuzzcoffee.com ein the 
L— ther words) make sure Youre ? he 
f id aes on the server 
Aly “ . A ev : : : 
@ Use the "cd" command to change your current directory to roi ne aa aaa 


the directory where you want to transfer files. 


cd starbuzz 


oS Changes your 


<= ie ~ “a directory to 
= starbuzz.- 


www.starbuzzcoffee.com 


Transfers a Copy of the 
“ ndexhtml” Lile into the 
turrent directory on 


the server. 


®) Transfer your files to the server using the "put" command. 


index.html . 
index.html 


www.starbuzzcoffee.com 
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You can also make a new directory on the server with 
the “mkdir” command. 


mkdir images 


eS 


©) You can retrieve files too, with the “get” command. 


get index.html 


=a» ~B—. 


Let’s put all that together. Here’s an example of 
FTP being used from a command-line application: ae 


File Edit Window Help Jam 
ftp www.starbuzzcoffee.com ~ 
Connected to www.starbuzzcoffee.com Connect and log, in. 


Name: headfirst ae 

Password: ****** Get a directory of 
230 User headfirst logged in yey what is there. One 
ftp> dir directory 
4096 Sep 5 15:07 starbuzz called 


ftp> cd starbuzz <~——~ Change to the starbuzz 
CWD command successful starbuzz directory. 


ftp> put index.html Transfer index.html 
SSee there. 


Transfer complete. 


ae html 
1022 Sep 5 15:07 index Look at the 


ftp> mkdir images 
Directory successfully created 
f£tp> cd images 

CWD command successful 
ftp> bye 


directory; there's 
index.html. 


Make a directory for images, and 
then quit using, the bye command. 
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L 


www.starbuzzcoffee.com . 


—_ <html: 
SS aes in 
| | www.starbuzzcoffee.com 7 
_— XQ SE 


lieations Come with m 
Laces, so feel free to 


a one © those. 


Most FTP app 
graphical inter 
this if you're usin 


This is just lik i ‘ 
ee 7 ike making a new folder, only you re 


on the server, not your own computer. 


v 


index html Creates a new 
directory called 
2 “images”, inside the 
im a starbuzz. directory 


on the server. 


index.html = 


Transfers a copy of the 
File from the server back 
to Your computer. 


uch friendlier 
skip right over 


FTP commands 


Whether you're typing in FTP commands 
on the command line, or using an FTP 
application with a graphical interface, the 
commands or operations you can perform 
are pretty much the same. 


= dir: get a listing of the current directory. 


= cd: change to another directory. “..” 
means up one directory here, too. 


= pwd: display the current directory you're 
in. 


put <filename>: transfers the specified 
filename to the server. 


= get <filename>: retrieves the specified 
filename from the server, back to your 
computer. 
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A Web Detour 


Q: My hosting company told me to use 
SFTP, not FTP. What’s the difference? 


A: SFTP, or Secure File Transfer Protocol, 
is a more secure version of FTP, but works 
mostly the same way. Just make sure your 
FTP application supports SFTP before you 
make a purchase. 


Q: So do | edit my files on my 
computer and then transfer them each 
time | want to update my site? 


and Windows: 
For Mac OS X: 


For Windows: 
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(_ll Popular FTP applications 
ay 


Here are a few of the most popular FTP applications for Mac 


thereyareno 
Dumb Questions 


A: Yes, for small sites, that is normally 
the way you do things. Use your computer to 
test your changes and make sure things are 
working the way you want before transferring 
your files to the server. For larger websites, 
organizations often create a test site and a 
live site so that they can preview changes 

on the test site before they are moved to the 
live site. 


If you're using a tool like Dreamweaver 
or Coda, these tools will allow you to test 
your changes on your own computer, and 
then when you save your files, they are 
automatically transferred to the website. 


= Fetch (http://fetchsoftworks.com/) is one of the most popular 
FTP applications for Mac. $ 


= Transmit (http://www.panic.com/transmit/). $ 
= Cyberduck (http://cyberduck.ch/). FREE 


= Smart FTP (http:/www.smartftp.com/download!). $ 


=» WS_FIP (http:/Avww.wsftple.com/). FR 
version, $ for the Pro version 


Cyberduck (http://cyberduck.ch/). FREE 
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EE for the basic 


Q: Can | edit my files directly on the 
web server? 


A: That usually isn't a good idea because 
your visitors will see all your changes and 
errors before you have time to preview and 
fix them. 


That said, some hosting companies will allow 
you to log into the server and make changes 
on the server. To do that, you usually need 
to know your way around a DOS or Linux 
command prompt, depending on what kind 
of operating system your server is running. 


Most als 
applications have 3 
byial version You £2" 
download to try 
before you buy: 
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DO fry this at home 


It's another homework assignment for you (check each item as you do it): 


Make sure you know where your root folder is on the server at 
your hosting company. 


Figure out the best way (and the best tool to use) to transfer 
files from your computer to the server. 


For now, go ahead and transfer the Starbuzz “index.html” and 
“mission.html’ files to the root folder of the server. 


End of Web Detour 


Back to business... 


That’s the end of the detour, and we’re back on the web 
superhighway. At this point, you should have the two 
Starbuzz pages, “index.html” and “mission.html”, sitting 
under your root folder on a server (or if not, you’re at least 
following along). 


After all this work, wouldn’t it be satisfying to 
make your browser retrieve those pages over 
the Internet and display them for you? Let’s 

figure out the right address to type into your 
browser... 


<html: 


i 


| </btmi> 


= oe indexchtm! 


</htm1> 


mission.html 


www.starbuzzcoffeescom 


Web page addresses start 
with http. We'll look into 
what http means in a see. 


~ 


http:// www.starbuzzcoffee.com / index.html 


For the root folder And here’s the 
Here's the website name. we just use wae page filename. 
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uniform resource locators 


\\‘45 
Mainstreet, USA 


You’ve probably heard the familiar “h” “t” “t” “p” “colon” 
“slash” “slash” a zillion times, but what does it mean? First of 
all, the web addresses you type into the browser are called 
URLs or Uniform Resource Locators. 


If it were up to us, we would have called them “web addresses,” 
but no one asked, so we’re stuck with Uniform Resource 
Locators. Here’s how to decipher a URL: 


http://www. starbuzzcoffee.com/index.html 
Neqpee!t SN eee 


The first part of The second part is And the third part is 
the URL tells you the website name. the absolute path to 
the protocol that At this point, you the resource from the 
needs to be used know all about that. root folder. 

to retrieve the 


resource. 


To locate anything on the Web, as long as you know the server 
that hosts it, and an absolute path to the resource, you can create 
a URL and most likely get a web browser to retrieve it for you 
using some protocol—usually HTTP. 
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A Unitorm Resource 
Locator (ORL) is 

a global address 

that can he used to 
locate anything on 
the Web, including 
HTML pages, audio, 
video, and many other 
forms of web content. 


In addition to 
specifying the location 
of the resource, a 
URL also names the 
protocol that you can 
use to retrieve that 
resource, 


getting connected 


What is HTTP? 


HTTP is also known as the HyperText Transfer Protocol. In other words, 
it’s an agreed-upon method (a protocol) for transferring hypertext 
documents around the Web. While “hypertext documents” are usually 
just HTML pages, the protocol can also be used to transfer images, or 
any other file that a web page might need. 


HTTP is a simple request and response protocol. Here’s how it works: 


: HTTP request: could I please have 
the file /index.html? 


HTTP response: I found 
that file: here itis. ~__ 


www.starbuzzcoffee.com 


Whatever you do, 
don't pronounce URL as 
“Earl,” because that's my 
name. It's pronounced 
U-R-L, 


So each time you type a URL into your browser’s address bar, the 
browser asks the server for the corresponding resource using the HTTP 
protocol. If the server finds the resource, it returns it to the browser and 
the browser displays it. What happens if the server doesn’t find it? 


»- HTTP request: could I please have 
the file /hardtofind.html? 


HTTP response: error 
#404; Ican't findit, 


www.starbuzzcoffee.com 


If the resource can’t be found, you’ll get the familiar “404 Error,” 
which the server reports back to your browser. 
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absolute paths to your files 


What’s an absolute path? 


The last time we talked about paths, we were writing HTML to make links with 
the <a> element. The path we’re going to look at now is the absolute path part 
of a URL, the last part that comes after the protocol (http) and the website name 
(www. starbuzzcoffee. com). 


An absolute path tells the server how to get from your root folder to a particular 
page or file. Take Earl’s Autos site, for example. Say you want to look in Ear!’s 
inventory to see if your new Mini Cooper has come in. To do that, you'll need 
to figure out the absolute path to the file “inventory.htm!” that is in the “new” 
folder. All you have to do is trace through the folders, starting at the root, to get 
to the “new” folder where his “inventory.html!” file is located. The path is made 
up of all the folders you go through to get there. 


20 66 


So, that looks like root (we represent root with a “/”), “cars”, “new”, and finally, 
the file itself, “inventory.html”. Here’s how you put that all todcther: 


WAYS S$ Earl’s Autos 
i the mt ‘- root folder 
“yt 
Add on each folder > 
as you navigate to cars r 
the file. / 


folder 
In between the ” 
names, put a‘/ to 
te. 


keep them separ? — 
Ne y 


inventory.html 


And then add on UF 
the filename. 


inventory.html 


Absolute path to | 
inventory html” 
an /cars/new/inventory.html 
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inventory.html 


Q: What is important about the 
absolute path? 


A: The absolute path is what a server 
needs to locate the file you are requesting. 
If the server didn’t have an absolute path, it 
wouldn't know where to look. 


Q: | feel like | understand the pieces 
(protocols, servers, websites, and 
absolute paths), but I’m having trouble 
connecting them. 


your pencil 


protocol 


thereyareno 
Dumb Questions 


A: If you add all those things together, 
you have a URL, and with a URL you can 
ask a browser to retrieve a page (or other 
kinds of resources) from the Web. How? The 
protocol part tells the browser the method 

it should use to retrieve the resource (in 
most cases, this is HTTP). The website 

part (which consists of the server name and 
the domain name) tells the browser which 
computer on the Internet to get the resource 
from. And the absolute path tells the server 
what page you're after. 


Q: We learned to put relative paths 
in the href attribute of our <a> elements. 
How can the server find those links if 
they aren’t absolute? 


You've waited long enough. It’s time to give your new URL a spin. Before you do, fill 
in the blanks below and then type in the URL (like you haven't already). If you're 
having any problems, this is the time to work with your hosting company to get 
things sorted out. If you haven't set up an hosting company, fill in the blanks for 
www.starbuzzcoffee.com, and type the URL into your browser anyway. 


website name 


www.it-ebooks.info 


getting 


A: Wow, great question. When you click 
on a link that is relative, behind the scenes 
the browser creates an absolute path out of 
that relative path and the path of the page 
that you click on. So, all the web server ever 
sees are absolute paths, thanks to your 
browser. 


Q: Would it help the browser if | put 
absolute paths in my HTML? 


A: Ah, another good question, but hold 
that thought—we'll get back to that in a sec. 


absolute path 
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easier urls 


I'd like my visitors to be able to type 
“http://www.starbuzzcof fee.com" and 
not have to type the “index.html”. Is 

there a way to do that? 


Remember, when we're 
kalking about web servers 
or ETP, we usually use the 
via term “Givettory” instead 
of “folder.” But they re 
Yes, there is. One thing we haven’t talked about is what veally the same thing 
happens if a browser asks for a directory rather than a file 
from a web server. For instance, a browser might ask for: 


http://www. starbuzzcoffee.com/images/ The —— ry in 
ww the root directory 


or 
http://www. starbuzzcoffee.com/ a The root directory itself 


When a web server receives a request like this, it tries to 

locate a default file in that directory. Typically a default file is 
called “index.html” or “default.htm” and if the server finds 
one of these files, it returns the file to the browser to display. 


But you need to find out 


So, to return a file by default from your root directory (or what your hosting, company 


any other directory), just name the file a wants You to name your 


“default.htm”. default file, because it 
depends on the type ° 


server they use: 


But I asked about 
“http://www.starbuzzcoffee.com", 
which looks a little different. It 
doesn't have the ending “/". 


Oops, you sure did. When a server receives a request like 
yours without the trailing “/” and there is a directory with 
that name, then the server will add a trailing slash for you. 
So if the server gets a request for: 


http://www. starbuzzcoffee.com 


it will change it to: 


http://www. starbuzzcoffee.com/ 


which will cause the server to look for a default file, and in 
the end it will return the file as if you’d originally typed: 


http://www. starbuzzcoffee.com/index.html 
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How default pages work 


1) The user types 
http://www.starbuzzcoffee.com/drinks/ 
into the browser. 


al om 


==> 


5 HTTP response: you asked for 
a directory, but I found “index. 
html" in that directory, so that's 


what I'm sending back. ee \= 
— 


Q: So anyone who comes to my site 
with the URL http://www.mysite.com is 
going to see my “index.html” page? 


A: Right. Or, possibly “default.htm” 
depending on which kind of web server your 
hosting company is using. (Note that “default. 
htm” usually has no “l” on the end. This is a 
Microsoft web server oddity.) 


HTTP request: could I please 
have the file “/drinks/"? 


getting 


aosins 


The server says, “That looks 


like a directory; is there a 
default file in that directory?" 


thereyareno 
Dumb Questions 


There are other possible default filenames, 
like “index.php”, that come into play if you 
start writing scripts to generate your pages. 
That's way beyond this book, but that doesn’t 
mean you won't be doing it in the future. 


Q: So when I’m giving someone my 
URL, is it better to include the 
“index.html” part or not? 
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a, 


www.starbuzzcoffee.com 


(4) Server locates a default 
ité called “index.html" in 
the drinks directory. 


A: Not. It’s always better to leave it off. 
What if, in the future, you change to another 
web server and it uses another default file 
name like “default.htm’? Or you start writing 
scripts and use the name “index.php”? Then 
the URL you originally gave out would no 
longer be valid. 
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practicing with paths 


Earl needs a little help with his URLs 


Earl may know Earl, but he doesn’t know U-R-L. He needs a little help figuring out the 
URL for each of the files below, labeled A, B, C, D, and E. On the right, write in the 
URL needed to retrieve each corresponding file from www.earlsautos.com. 


Earl’s root folder ) — 
. an </html> vA) 

earls_autos, ia index.html 
, <fittmi> LB 


directions.html 


<html: 


</htm1> ic) a I efmtm> 


a ge index html [ =] index.htm! 


<html: 7 -, <html: 
</ntaa> | </ntmi> o 
inventory.html inventory.html 
iar! iL 
Fr fll 
eS @ 
a i 
“he minicooper.gif 
leal leat 
I il 
od od 
idte i 
element.gif mustang.gif 
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getting connected 


Write the URL here- 


you are here > 141 
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linking to other web pages 


Fantastic! We're 
up and running on the 

Web. I'm already hearing 
great buzz about our site 
in the stores. 


By the way, we've got a 
new caffeine awareness 
program; we figure if we're going to be 
pumping people full of caffeine, we want them 
to know how to take it to the limit. Can we point 
people to the caffeine information over on 
wickedlysmart.com/buzz from our site? 


How do we link to other websites? 


URLs aren’t just for typing into browsers; you can use them right in your 
HTML. And, of course, right on cue, the Starbuzz CEO has a new task 
for you: make a link from the main Starbuzz page over to the caffeine 
information at http: //wickedlysmart.com/buzz. As you can probably 
guess, we’re going to throw that URL right into an <a> element. Here’s 
how: 


<a href="http://wickedlysmart.com/buzz">Caffeine Buzz</a> 


An everyday, normal, 
garden-variety <a> element. | 
We've put a URL in the href. Clicking, on the label “Caffeine Puss? 


will retrieve a page from wickedlysmart.com/buzz. 


That’s all there is to it. To link to any resource on the Web, all you need is its 
Uniform Resource Locator, which goes in the <a> element as the value of the 
href attribute. Let’s go ahead and add this in the Starbuzz “index.html” page. 
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getting connected 


Linking to Caffeine Buzz 


Open your Starbuzz “index.html” file in the “chapter4/starbuzz” folder, and scan down to 
the bottom. Let’s add two new links: a relative link to the mission statement in 
“mission.html”, and a link to Caffeine Buzz. Make the changes below, then save and load 
your “index.html” file in your browser. Click on the link and enjoy the Caffeine Buzz. 


<html> 
<head> 
<title>Starbuzz Coffee</title> 
<style type="text/css"> 
body { 
background-color: #d2b48c; 
margin-left: 20%; 
margin-right: 20%; 
border: 2px dotted black; 
padding: 10px 10px 10px 10px; 
font-family: sans-serif; 
} 
</style> 
</head> 


<body> 
<hl>Starbuzz Coffee Beverages</h1> 
<h2>House Blend, $1.49</h2> 
<p>A smooth, mild blend of coffees from Mexico, 
Bolivia and Guatemala.</p> 


<h2>Mocha Cafe Latte, $2.35</h2> 
<p>Espresso, steamed milk and chocolate syrup.</p> 


<h2>Cappuccino, $1.89</h2> 
<p>A mixture of espresso, steamed milk and foam.</p> 


6 secon hol” 
. he mission 
<h2>Chai Tea, $1.85</h2> Here's the link to the ae 


: tive av 
<p>A spicy drink made with black tea, spices, Cie, This uses 2 relay \4 
milk and honey. link to “mission: ~~ 


</ p> ee a cbov> to 
<p> We added oe 


‘ ks ° 
<a href="mission.html">Read about our Mission</a>. put the Iv < 
<br> <———_ different Imes: 


Read the <a href="http://wickedlysmart.com/buzz">Caffeine Buzz</a>. 
</p> 


PP aa a a Here’s where we've 
And we've added some structure added the link to the 


here by Grouping the links and wickedlysmart.com/buz>. Page. 
text into a paragraph. 
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testing those links 


And now for the test drive... Here's the page with the 


new link, just as we planned. 


| Asmocth, mild blend of coffees {rom Maxico, Bolivia ond 
e ' 


2 Espresso, steamed mie and chocolahe syrup. 


' Cappuccino, $1.89 
| sc riure of aapranis pa dhearteel NBR and Roan. 


| 
1 
_ Chai Tea, $1.85 


Tannin oe euburonn om soos n de sub oth sk wean om San en Gn ee ot et eH 


Here’s the new link. Notice, we onl 
linked the words “Caffeine Buzz,” 
so it looks a little different from 
the other link. 


a, 


9... [ 
aly “ising Buzz | 


Bote 
And when You cliek on the link, fiatoeyieettneweite Beside 
Your browser will make an HTTP | = pas ports Te ale oe 
‘ mer ee nite a sate 
request. to wickedlysmart.com/ Cee eta eaten y rec 
buzz and then display the result. | tat cutee acer ee ene! USE char can aye 
| een Pee naman Soreeecese ratte 
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At Caffeine Buzz, we use 
relative links to other pages on 

our site, and URLs to link offsite, like 

www.caffeineanonymous.com. 


thereyareno 
b Questions 


pum 


Q: It seems like there are two ways 
to link to pages now: relative paths 
and URLs. 


A: Relative paths can only be used 
to link to pages within the same website, 
while URLs are typically used to link to 
other websites. 


Q: Wouldn't it be easier if | just 
stuck with URLs for links to my own 
pages and outside pages? That would 
work, wouldn't it? 


A: Sure, it would work, but there’s 

a couple of reasons you don’t want to 
go there. One problem is that URLs 
are hard to manage when you have a 
lot of them in a web page: they’re long, 
difficult to edit, and they make HTML 
more difficult to read (for you, the page 
author). 


Also, if you have a site with nothing 

but URLs that link to local pages and 
you move the site or change its name, 
you have to go change all those URLs 

to reflect the new location. If you use 
relative paths, as long as your pages 
stay in the same set of folders—because 
the links are all relative—you don’t 

have to make any changes to your <a> 
element href attributes. 


So, use relative links to link to your own 
pages in the same site, and URLs to link 
to pages at other sites. 


Q: Haven't we seen one other 
protocol? | kept seeing “file:///” 
before we started using a web server. 
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A: Yes; good catch. The file protocol 
is used when the browser is reading files 
right off your computer. For example, 

the file URL, “file:///chapter4/starbuzz/ 
index.html”, tells the browser that the file 
“index.html” is located at the path 
“Ichapter4/starbuzz/”. This path may look 
different depending on your operating 
system and browser. 


One important thing to notice in case 
you try to type in a file URL is that the 
file URL has three slashes, not two, like 
HTTP. Remember it this way: if you take 
an HTTP URL and delete the website 
name you'll have three slashes, too. 


Q: Are there other protocols? 


A: Yes, many browsers can support 
retrieval of pages with the FTP protocol, 
and there is a mail protocol that can 
send data via email. HTTP is the 
protocol you'll be using most of the time. 


Q: I’ve seen URLs that look like 
this: http://www.mydomain.com:8000/ 
index.html. Why is there a “:8000” in 
there? 


A: The “:8000” is an optional “port” 
that you can put in an HTTP URL. Think 
of a port like this: the website name 

is like an address, and the port is like 

a mailbox number at an address (say, 

in an apartment complex). Normally 
everything on the Web is delivered to a 
default port (which is 80), but sometimes 
web servers are configured to receive 
requests at a different port (like 8000). 
You'll most likely see this on test servers. 
Regular web servers almost always 
accept requests on port 80. If you don’t 
specify a port, it defaults to 80. 
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The Case of Relatives and Absolutes 


PlanetRobots, Inc., faced with the task of developing a website 

for each of its two company divisions—PlanetRobot Home and 

PlanetRobot Garden—decided to contract with two firms to get 

the work done. RadWebDesign, a seemingly experienced firm, took 

on the Home division’s website and proceeded to write the site’s 
internal links using only URLs (after all, they’re more complicated, 

so they must be better). A less experienced, but well-schooled 
firm, CorrectWebDesign, was tasked with PlanetRobot’s Garden 
site, and used relative paths for links between all the pages within 

the site. 


Five-Minute 
Mystery 


Just as both projects neared completion, PlanetRobots called with 
an urgent message: “We’ve been sued for trademark infringement, so 
we're changing our domain name to RobotsRUs. Our new web server 
is going to be www. robotsrus.com.” CorrectWebDesign made a 
couple of small changes that took all of five minutes and was ready 
for the site’s unveiling at the RobotsRUs corporate headquarters. 
RadWebDesign, on the other hand, worked until 4 a.m. to fix their 
pages but luckily completed the work just in time for the unveiling. 
However, during a demo at the unveiling, the horror of horrors 
occurred: as the team leader for RadWebDesign demonstrated 
the site, he clicked on a link that resulted in a “404—Page Not 
Found” error. Displeased, the CEO of RobotsRUs suggested that 
RadWebDesign might want to consider changing their name to 
BadWebDesign and asked CorrectWebDesign if they were available 
to consult on fixing the Home site. 


What happened? How did RadWebDesign flub things 
up so badly when all that changed was the name of 
the web server? 
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Web page fit and finish 


Can you say “web career”? You've certainly delivered everything the 
Starbuzz CEO has asked for, and you’ve now got a high-profile website 
under your belt (and in your portfolio). 


But you’re not going to stop there. You want your websites to have that 
professional “fit and finish” that makes good sites into great ones. You’re 
going to see lots of ways to give your sites that extra “polish” in the rest of 
this book, but let’s start here with a way to improve your links. 


Improving accessibility by adding a title to your links 


Wouldn’t it be nice if there were a way to get more information about the link 
youre about to click on? This is especially important for the visually impaired 
using screen readers because they often don’t want the entire URL spoken to 
them: (“h” “t? “t? p” “:? “slash” “slash” “w” “w” “w” “dot”), and yet the link’s 
label usually only gives a limited description, like “Caffeine Buzz.” 


The <a> element has an attribute called title just for this purpose. Some 
people are confused by this attribute name because there’s an element named 
<title> that goes in the <head>. They have the same name because they are 
related—it is often suggested that the value of the title attribute be the same 
as value of the <title> element of the web page you are linking to. But that 
isn’t a requirement and often it makes more sense to provide your own, more 
relevant description in the title attribute. 


Here’s how you add a title attribute to the <a> element: 


Read the <a href="http://wickedlysmart.com/buzz" 
title="Read all about caffeine on the Buzz">Caffeine Buzz</a> 


The title element has a value that is a textual 
description of the page you are linking to. 


Now that we've got a title attribute, let's see how your visitors would make use of it. Different 
browsers make different use of the title, but many display a tool tip. Add the changes above to 
your “index.html” file and reload the page to see how it works in your browser. 
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The title test drive... 


For most browsers, the title is displayed 
as a tool tip when you pass the mouse 
over a link. Remember that browsers 
for the visually impaired may read the 
link title aloud to a visitor. 


The title is displayed 
as a tool tip in most 
browsers: Just Pass 

our mouse over the 
link and hold it there 
a second to see the 
tool tip. 


She acd Tiast Guide to Better Links 


Here are a few tips to keep in mind to further improve the fit and nish of yout links: 


¢ Keep yout link labels concise. Don t make entive sentenc 


es Ot large pleces of text into links. In 
general, keep them toa few words. Provide additional information in the title attribute, 


: Keep yout link labels meaningful. Never use link labels like “click here” or “this page.” Users tend 


to scan pages for links Sst, and then tead pages second. So, providing meaningful links improves 


the usability of your page. Jest yout page by veading ust the links on it: do they make sense? Or 
do you need to read the text around them? 


¢ Avoid placing links ight next to each other; users have trouble distinguishing between links that are 
placed closely together. 
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Open your Starbuzz “index.html” file and add a title to the link to “mission.html” with the text 
“Read more about Starbuzz Coffee's important mission.” Notice that we didn’t make the mission 


, O 
Exercise link’s label as concise as it should be. Shorten the link label to “our Mission.” Check the back of 
the chapter for the answer, and test your changes. 


Great job on the links. 
Td really like for people to link 
directly to the coffee section of 
the Buzz site. Is that possible? 


Caffeine Bur7 


Frnt ca Tae Fe te he cst 


Sores 
Get Cores eee Sa Bee erie |e bear 
fron wivch) an ec produne cafes foun cy aed pens 


Cea 6 Ov 6 ey Tine LE ng Wi 
Lista hets chided Louk a te ee 

cater mbt cui 7 ies pg ab arta 
Sane ene Stireatds i oetkeing coders per porving. ergy tera 
header Caer ite. id nat ocean, bad dea 
See Ben gta rie here Be eeeieg irre ree 
ae oat ot he eer, . 


Vet a in cee inate OF Cae i ey Oe 
Soran Serer ioe eee nor aryl dor pon, ‘mally 


Cafe A tak Crm le wc aS, Rc eri ae, 
fephaty condal 9s tert oe pe ng of ae ce Loon 
ee Le ee) Sg ee 
Lorttiny Corre eae epire eet eeiey Hioe iiny 


Be OG) Ee Rea oe erie Te 
Par? a Peery saree ac aed PaPErd HAs, 
Sa an yc Dn awe Wp ly 
2S Pt Os ea ee ge 


Linking into a page peters at ay 


ees ea ee 
>, ] ‘Satna etre nd ded chiens Woon en mand in 
So far, whenever you've linked to another page, the page loads Te cadena 6 ars one Baars rap tet ian 
rec ie hom 
and your browser displays it from the top. pital ep vk magia mea ve ee peng errno 


. ar : 7 PenTEarEG 9 Carers Cg hay. The aside cohen 
But the CEO’s asking you to dink into a particular spot in the page: 7 eS is natn it stadia 


the Coffee section. rind 

Fy peepee A ey oy, 
Sound impossible? Come on, this is Head First—we’ve got the * Sten wes «Ay be nye 
technology. How? Well, we haven’t told you everything about the : me peer tronl pep hie 
<a> element yet. Turns out the <a> element can team up with the io ene ee ipril 
id attribute to take you straight to a specific point in a page. Teme BS Aha biti, 
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Using the id attribute to create a destination for <a> 


We haven’t talked about the id attribute yet; it’s an important attribute with special 
properties, and we’ll get into more detail about other special properties of id later 
in the book. For now, think of it as a way of uniquely identifying an element. One 
special property that elements with ids get is that you can link to them. Let’s see 
how to use the id attribute to create a destination in a page for <a>. 


C1) Find the location in the page where you’d like to 
create a landing spot. This can be any text on the 
page, but often is just a heading. 


2] Choose an identifier name for the destination, like 
“coffee” or “summary” or “bio,” and insert an id 
attribute into the opening tag of the element. 


Let’s give it a try. Say you want to provide a way to link to the Chai Tea item on 

the Starbuzz page. Here’s what it looks like now: Here’s the snippet 

a from “index.html” 
with the Chai heading 
and destription. 


<h2>Chai Tea, $1.85</h2> 


<p>A spicy drink made with black tea, spices, milk 
and honey.</p> 


Following the two steps above, we get this: 


It’s important that your 


Add the id to the And we'll give this id be unique. That is, the 
opening tag, of the destination the “shai” id must be the only 


heading. \ identifier “chai”. “chai” id in the page! 


<h2 id="chai">Chai Tea, $1.85</h2> 


<p>A spicy drink made with black tea, spices, milk and 
honey.</p> 


i By giving it an id, you've made a 
destination out of the Chai Tea 
heading in the “index.html” page. 
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How to link to elements with ids 


You already know how to link to pages using either relative links or URLs. In 
either case, to link to a specific destination in a page, just add a # on the end of 
your link, followed by the destination identifier. So if you wanted to link from 
any Starbuzz Coffee web page to the “chai” destination heading, you’d write 
your <a> element link this: 


<a href="index.html#chai">See Chai Tea</a> 


: . of s ecitic 
Unfortunately, linking to Chai Tea isn’t very impressive because the The main bene! it wl ‘ 
whole page is small enough that it easily fits in the browser. Let’s link destinations Is ‘les so Your 
to the Coffee section of http: //wickedlysmart.com/buzz instead. locations in sake 


) to stroll 
Here’s what you’re going to do: visitors don t 4 ina Lor 

khrough the file locking, 
the vight settion 


(1) Figure out the id of the Coffee heading. 


6 Alter the existing <a> element in the Starbuzz Coffee 
“index.htm!” file to point to the destination heading. 


3 ) Reload your “index.html” page and test out the link. 


Finding the destination heading 


To find the destination heading, you’re going to have Pt Corina 

to look at the wickedlysmart.com/buzz page and es 
view their HTML. How? Almost all browsers have a 
“View Source” option. So, visit the page and when it 
is fully loaded, choose the “View Source” option, and 
you'll see the markup for the page. Ter ates reece & wickrliyemaert 


ak 
Seca tage 


mH Dees + Cubecard rise 


In most browsers, You Can 


right-click to “View Source.” 
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Now that you've got your hands on their HTML... 


Scroll down until you see the Coffee section; it looks like this: Just a small snippet from 


a the Caffeine Buzz page: 


This is similar to the naming problem 

with <b>mateine</b> and <b>guaranine</b>. 

ale Here's the Coffee settion. You can 
see the heading for it along with 


the start of the paragraph below. 
<h3 id="Coffee">Coffee</h3> 


2 Ahhh, and here is the 


<i>All fluid ounces are U.S. fluid ounces.</i> eine heading, It has 
e nai ? 
one me “Coffee” 


Reworking the link in “index.html” 


Now all you need to do is revisit the link to Caffeine Buzz 
and add on the destination anchor name, like this: 
The default file at 
wickedlysmart.com/buzz. is ith 
This is a snippet from the index.html. So, we'll add that Add # along wi 


ination id 
Starbuzz “index.html” File. to the URL so we can use it the destinatio 
a7 with the destination id. ) to your href. 


Read the <a href="http://wickedlysmart.com/buzz/index.html#Coffee" 
title="Read all about caffeine on the Buzz">Caffeine Buzz</a> 


Make this change to your Starbuzz “index.html” file. Sil _ ae, 
Reload and click on the “Caffeine Buzz” link. You ware ae = 


St fet mea 


should be taken directly to the Coffee section of oe ere 
Caffeine Buzz’s front page. i 
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Q: When | have two attributes in an 
element, is the order important? For 
example, should the title attribute always 
come after the href? 


A: The order of attributes is not important 
in any element (if it were, we'd all have 
headaches 24/7). So, use any ordering you 
like. 


Q: How would | create a tool tip for an 
element that’s not an <a>? 


A: You can add the title attribute to any 
element, so if you want a tool tip on, say, a 
heading, you can add a title attribute to your 
<h1> opening tag just like we did with <a>. 
There are a few elements that use the title 
attribute for more than just a tool tip, but the 
tool tip is its most common purpose. 


Q: Can | add an id attribute to any 
element? 


A: Yes, you can. You could link into the 
middle of a paragraph by adding an id to an 
<em> element, for instance. It’s unlikely that 
you'll often need to do that, but you can do it 
if you want. 


Q: Could | link to a link by adding 
an id attribute to an <a> element in the 
destination? 


A: Yes! 


Q: | noticed in the id names, you 
used “chai” with all lowercase letters 
and Caffeine Buzz used “Coffee” with an 
uppercase “C”. Does it matter? 


thereyareno 
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A: You can use any combination of 
upper- and lowercase characters in your 

id attributes. Just make sure you are 
consistent and always use the same upper- 
and lowercase letters in your hrefs and 
destination id (which is why it is often easier 
to make these names entirely lowercase 
every time). If you aren’t consistent, don’t 
expect your links to work correctly on every 
browser. The most important thing about the 
id name you choose is that it must be unique 
in your page. 


Q: Can | put a link to a destination 
from within the same document? 


A: Sure. In fact, it is common to define a 
destination “top” at the top of a page (say, on 
the top heading of the page) and have a link 
at the bottom of the page reading “Back to 
top.” It is also common in long documents to 
have a table of contents for the entire page. 
For instance, to link to the “top” destination 
heading in the same page, you would write 
<a href="#top’>Back to top</a>. 


Q: Why did we need to add the “/index. 


html” to the Buzz URL in order to create a 
link to the destination heading? Couldn’t 
we have just written: 
http://wickedlysmart.com/buzz#Coffee? 


A: No, that won't always work because 
the browser adds that trailing slash on the 
end of the URL for you, which could end 
up replacing the id reference. You could, 
however, have written: 
http://wickedlysmart.com/buzz/#Coffee, 
which will produce the same results as the 
link we created using “index.html”. This 
will come in handy if you don’t know if the 
default file is named “index.html”. 
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Q: If a web page doesn’t provide a 
destination and | still need to link to a 
specific part of the page, how can I? 


A: You can't. If there is no destination (in 
other words, no element with an id), then you 
can’t direct the browser to go to a specific 
location in a web page. You might try to 
contact the page author and ask them to add 
one (even better, tell them how!). 


Q: Can | have a destination id like 
“Jedi Mindtrick” or does an id have to be 
only one word? 


A: To work consistently with the most 
browsers, always start your id with a letter 
(A-Z or a-z) and follow it with any letter, 
digit, hyphen, underscore, colon, or period. 
So, while you can’t use a space and have a 
name like “Jedi Mindtrick”, that isn’t much 
of a restriction because you can always 
have “Jedi-Mindtrick”, “Jedi_Mindtrick”, 
“JediMindtrick”, and so on. 


Q: How can | tell others what 
destinations they can link to? 


A: There is no established way of doing 
this, and in fact, “View Source” remains the 
oldest and best technique for discovering the 
destinations you can link to. 


Q: Do | always use just words as the 
content of an <a> element? 


A: No. The <a> element has always been 
able to create links from words and images 
(inline content), and has recently been 
updated (in HTML5) so that you can create 
links from block elements, like <p> and 
<blockquote> too! So <a> can be used to 
create links from all kinds of things. 
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The Case of Relatives and Absolutes 


So, how did RadWebDesign flub up the demo? Well, 

because they used URLs for their hrefs instead of relative 

links, they had to edit and change every single link from 
http://www.planetrobots.comto http://www. 

robotsrus.com. Can you say error-prone? At 3:00 ——— Oors... 


a.m., someone yawned and accidentally typed rate wy 
° fe) : : oro 
e- Tutte. http://www. robotsru.com (and as fate has it, 4 
Fiv Mi uf that was the same link that the CEO clicked on at on the en 
of the name- 


the demo). 


Mystery y 


, CorrectWebDesign, on the other hand, used relative 
paths for all internal links. For example, the link from the 
9 alved company’s mission statement to the products page, 
<a href="../products.htm1">, works whether 
the site is called PlanetRobots or RobotsRUs. So, all 
CorrectWebDesign had to do was update the company 
name on a few pages. 


So RadWebDesign left the demo sleep-deprived and with 
a little egg on their face, while CorrectWebDesign left the 
meeting with even more business. But the story doesn’t end 
there. It turns out that RadWebDesign dropped by a little 
coffechouse/bookstore after the demo and, determined not 
to be outdone, picked up a certain book on HTML and 
CSS. What happened? Join us in a few chapters for “The 
Case of Brute Force Versus Style.” 
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What the CEO 
wants is a whole 


Gee coed cafe coneiered to be 100 oy. in herp, 

. fegie dering [EB oe! V0 ea? ing: cote ce coef ce SE 
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Awesome job linking to the Buzz site...I 
know I keep asking for changes, but really, this 
is the last one. Can you make the Buzz site come 
up in a separate window when I click on the link? I 
don't want the Starbuzz page to go away. 


Linking to a new window 


We have another new requirement from the 
Starbuzz CEO (there are always new requirements 
for websites). What he wants is this: when you click 
on the “Caffeine Buzz” link in the Starbuzz Coffee 
page, the Starbuzz Coffee page shouldn’t go away. 
Instead, a whole new window should open up with 
the Caffeine Buzz page in it, like this: 


When the Caffeine 


Buzz window Pops open 
it will open over the top 


Here s the main 


Starbuzz Coffee page- eee 
ide ece bout the Starbuzz page 
= vill still be there. 


cafteine Buzz 


Gourcam i 

CR a Ra ea a a Li Ca 
Bd JG WL oe [lt ne en ed ey 
Arebioe ancl Gosumie apace ood 1 2 her egress Dee eerie 2! 
ec Ee 


ta ee ee ing eri oe. fueeiy abet hel 
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Opening a new window using target 


To open a page in a new window, you need to tell the browser the name of the window in 
which to open it. If you don’t tell the browser a specific window to use, the browser Just opens 
the page in the same window. You can tell the browser to use a different window by adding a 
target attribute to the <a> element. ‘The value of the target attribute tells the browser the 
“target window’ for the page. If you use “_blank” for the target, the browser will always open a 


new window to display the page. Let’s take a closer look: 


<a target="_blank" href="http://wickedlysmart.com/buzz" 
C title="Read all about caffeine on the Buzz">Caffeine Buzz</a> 
r 


he target attribute tells the browser where 
to open the web page that is at the link in 
the href attribute. [f there is no target, 
then the browser opens the link in the same 
window. If the target is “ blank”, then the 


browser opens the link in a new window. 


Open your Starbuzz “index. 
html” file. Add the target 
attribute to the <a> tag that 


links to the Caffeine Buzz 
page. Now give it a try—did 
you get a new window? 


Cie SE RAIN 
-“PQW ER 
Can you think of some advantages and 


some disadvantages to using the target 
attribute to open a page in a new window? 
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Dumb Questions 


Q: I’m getting a new tab instead of a new window. 
Am | doing something wrong? 


A: No, you're not. Most browsers now have a default 
setting to open new windows in a tab, rather than a 
whole new browser window, because that’s what users 
seem to prefer. But a new tab and a new window are 
really the same thing; it’s just that the tab shares the 
same window border as your original window. If you 
want to force a whole new window, most browsers have 
a way to do this through the preferences settings. 


Q: What if | have more than one <a> element with 
a target? If there’s already a “_blank” new window 
open, will it open in the window that’s already open? 
Or will it open in a new “_blank” window? 


A: If you give the name “_blank” to the targets in 

all your <a> elements, then each link will open in a 
new blank window. However, this is a good question 
because it brings up an important point: you don’t 
actually have to name your target “_blank”. If you give 
it another name, say, “coffee”, then all links with the 
target name “coffee” will open in the same window. The 
reason is that when you give your target a specific 
name, like “coffee”, you are really naming the new 
window that will be used to display the page at the link. 
“ blank” is a special case that tells the browser to always 
use a new window. 


Head First: Hello, Target! We’re so glad you could 
join us. 

Target: I’m glad to be here. It’s nice to know you’re 
still interested in hearing about me. 


Head First: Why do you say that? 


Target: Well, to be honest, I’m not as popular as I 
used to be. 


Head First: Why do you think that is? 


Target: I think it’s because users want to be in 
control of when a window opens. They don’t always 
like new windows popping open at unexpected times. 


Head First: Well, it can be very confusing—we’ve 
had complaints from people who end up with so 
many windows on their screens, they can’t find the 
original page. 


Target: But it’s not like it’s difficult to get rid of the 
windows. ..just click on the little close button. What's 
so hard about that?! 


Head First: True, but if users don’t know a new 
window has opened, then they can get confused. 

Sometimes the new window completely covers the 
old window and it’s hard to tell what’s happening. 


Target: Well, browsers are getting better at this kind 
of thing. 


Head First: How so? 


Target: Browsers often open external pages in a 
new tab, within the same browser window, rather 
than opening them in a brand-new window. 


Head First: Ah, yes, that would help because it 
will be a lot less confusing to see a new tab open, 
which the user can visit whenever they want. Unlike 
opening a new window, it isn’t so disorienting. 
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The Target Attribute Exposed 


This week’s interview: 
Using target considered bad? 


Head First: How does this help with screen readers 
though? 


Target: You mean browsers used by the visually 
impaired? 


Head First: Right. Some screen readers play a 
sound when a new window opens, but others just 
ignore the new window completely, or else they jump 
right to the new window immediately. Either way, it’s 
gotta be confusing for someone who can’t see what’s 
going on. I have no idea how they are handling tabs. 


Target: [Sigh] Yeah, we just aren’t there yet in 
terms of providing good tools that meet everyone’s 
needs, especially the visually impaired. That said, we 
seem to need to have the ability to take the user to 
pages outside our own site, and many sites do that 
by opening another window (or tab, if the browser 
supports it). 


Head First: Yup. We need you, but we need to get 
better about not confusing the user. 


Target: I’m hoping the web standard and browser 
teams will make all this better. 


Head First: I guess for now we’re just going to have 
to remember to use you when it’s appropriate, but 

to keep in mind those people who might be visually 
impaired and not overuse you. 


Target: You got it. You’ve helped ease my burden a 
bit here; thanks for helping me get the word out! 


Head First: Any time, Target! 
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a brain 


HTMLeross 


Here are some mind benders for your left brain. 


3 4 5 
6 7 
8 9 
10 1 
12 
13 14 15 16 
17 
18 
19 
Across Down 
1. Web address to a resource. 2. Top directory of your website. 
3. A Mac FTP application. 4. Request/response protocol. 
7. Unique name on the Web. 5. Keep your link labels _ 
8. The file you get when you ask for a directory. 6. Attribute used to make an element into a 
10. What are you supposed to send back from destination. 
Webville? 9. Earl sold these. 
12. Top directory of your website. 11. Always use these kinds of links when linking to 


13. Protocol we’ve been using up until this chapter. | pages on the same server. 

16. People can scan these rather than reading text. | 14. Wrong way to pronounce URL. 
17. Path from the root. 15. Informative caffeine site. 

18. Controls domain names. 

19. The file you get when you ask for a directory. 
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Qe POINTS 


Typically the best way to get on the Web is 
to find a hosting company to host your web 
pages. 


A domain name is a unique name, like 
amazon.com or starbuzzcoffee.com, that is 
used to identify a site. 


A hosting company can create one or more 
web servers in your domain. Servers are 
often named “www 


The File Transfer Protocol (FTP) is a 
common means of transferring your web 
pages and content to a server. 


FTP applications, like Fetch for Mac or 
WS_FTP for Windows, can make using 
FTP easier by providing a graphical user 
interface. 


A URL is a Uniform Resource Locator, or 
web address, that can be used to identify 
any resource on the Web. 


A typical URL consists of a protocol, a 
website name, and an absolute path to the 
resource. 


HTTP is a request and response protocol 
used to transfer web pages between a web 
server and your browser. 


The file protocol is used by the browser to 
read pages from your computer. 


An absolute path is the path from the root 
folder to a file. 


“index.html” and “default.htm” are 
examples of default pages. If you specify 
a directory without a filename, the web 
server will look for a default page to return 
to the browser. 


getting 


You can use relative paths or URLs in 
your <a> element's href attribute to link to 
other web pages. For other pages in your 
site, it's best to use relative paths, and use 
URLs for external links. 


Use the id attribute to create a destination 
in a page. Use # followed by a destination 
id to link to that location in a page. 


To help accessibility, use the title attribute 
to provide a description of the link in <a> 
elements. 


Use the target attribute to open a link in 
another browser window. Don't forget that 
the target attribute can be problematic 
for users on a variety of devices and 
alternative browsers. 


Wait, wait! Before you 
go, we need our logo on 
the web page! Hello? Oh, I 
guess they've already gone on 
to Chapter 5... 
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exercise 


You've waited long enough. It’s time to give your new URL a spin. 
Before you do, fill in the blanks below and then type in the URL 
(like you haven't already). If you're having any problems, this is the 
time to work with your hosting company to get things sorted out. If 
you haven't set up an hosting company, fill in the blanks for www. 
starbuzzcoffee.com, and type the URL into your browser anyway. 


www.starbuzztoffee.com /index.htwl 


protocol website name absolute path 


Your website name here. 


UPR OL 
O 
O 
"FILE! Tere ne 
“I T ‘DOMAIN 
"DIE;FJA;/UILIT N °C 
‘P|O|S/|TIC/A|'RID A 
i E R|O|O)T 
Te Lee 'B 5 "L|TIN| KI] 5S 
‘'A\BIS;/O;LIU/T/E A 
R Z T 
L Z IC ANN 
V 


DIE|FIA;/UJLIT 
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getting connected 


Earl needs a little help with his URLs 


Solution 


pare | | ES aa if TN ocak com eava/ view!" /mages/ mini¢ooper-.9 
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exercise 


Add a title to the link to “mission.html” with the text “Read more about Starbuzz Coffee’s 
important mission.” Notice that we didn’t make the mission link’s label as concise as it should be. 
Shorten the link label to “our Mission”. Here’s the solution; did you test your changes? 


<head> 
<title>Starbuzz Coffee</title> 
<style type="text/css"> 


body { 
background-color: #d2b48c; 
margin-left: 20%; 
margin-right: 20%; 
border: lpx dotted gray; 
padding: 10px 10px 10px 10px; 
font-family: sans-serif; 
} 
</style> 
</head> 
<body> 


<hl>Starbuzz Coffee Beverages</h1> 

<h2>House Blend, $1.49</h2> 

<p>A smooth, mild blend of coffees from Mexico, 
Bolivia and Guatemala.</p> 


<h2>Mocha Cafe Latte, $2.35</h2> 
<p>Espresso, steamed milk and chocolate syrup.</p> 


<h2>Cappuccino, $1.89</h2> 
<p>A mixture of espresso, steamed milk and foam.</p> 


Add a title <h2>Chai Tea, $1.85</h2> 
attribute <p>A spicy drink made with black tea, spices, 
bo the milk and honey. 


mission link. </p> 


oe Be Ss Move the “Read about” outside the <a> element. 


Read about <a href="mission.html" 
title="Read more about Starbuzz Coffee's important mission">our Mission</a>. 
<br> 
Read the <a href="http://wickedlysmart.com/buzz" 
title="Read all about caffeine on the Buzz">Caffeine Buzz</a>. 
</p> 
</body> 
</html> 
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5 adding images to your pages 
+ * 
‘ Meeting the Media 


Smile and say “cheese.” Actually, smile and say “gif,” “jpg,” or 
“png”—these are going to be your choices when “developing pictures” for the Web. In this 
chapter you’re going to learn all about adding your first media type to your pages: images. 

Got some digital photos you need to get online? No problem. Got a logo you need to get on 
your page? Got it covered. But before we get into all that, don’t you still need to be formally 
introduced to the <img> element? So sorry, we weren’t being rude; we just never saw the 

“right opening.” To make up for it, here’s an entire chapter devoted to <img>. By the end of 

the chapter you’re going to know all the ins and outs of how to use the <img> element and its 
attributes. You’re also going to see exactly how this little element causes the browser to do extra 


work to retrieve and display your images. 
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images ir 


How the browser works with images re 


Chor Elixirs 
Browsers handle <img> elements a little differently than other elements. Pee 
Take an element like an <h1> or a <p>. When the browser sees these 
tags in a page, all it needs to do 1s display them. Pretty simple. But when 


a browser sees an <img> element, something very different happens: the 


browser has to retrieve the image before it can be displayed in a page. etal a 


The best way to understand this is to look at an example. Let’s take a 


7 


Syd 65 oy an 


quick look back at the elixirs page from the Head First Lounge, which 


has four <img> elements: SMasbrrvy Hie Eker 


<html> 
<head> =n ae 
<title>Head First Lounge Elixirs</title> agen ane 
</head> : 
<body> I 
<hl>Our Elixirs</hl1> aa ov a eam 
<h2>Green Tea Cooler</h2> = 
<p> icin 
<img src=". ./images/green.jpg"> 


Chock full of vitamins and minerals, this elixir combines 
the healthful benefits of green tea with a twist of chamomile 
blossoms and ginger root. 

</p> 

<h2>Raspberry Ice Concentration</h2> 


<p> 
<img src="../images/lightblue.jpg"> ok 
Combining raspberry juice with lemon grass, citrus peel and : 
rosehips, this icy drink will make your mind feel clear and We've got four images 
crisp. an this HTML. 

</p> 

<h2>Blueberry Bliss Elixir</h2> 

<p> 
<img src="../images/blue.jpg"> 


Blueberries and cherry essence mixed into a base of 
lderflower herb tea will put you in a relaxed state of 
bliss in no time. 


</p> 
<h2>Cranberry Antioxidant Blast</h2> 
<p> 

<img src="../images/red.jpg"> 


Wake up to the flavors of cranberry and hibiscus in 
this vitamin C rich elixir. 
</p> 
<p> 
<a href="../lounge.html">Back to the Lounge</a> 
</p> 
</body> 
</html> 
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adding images to your pages 


Now let’s take a look behind the scenes and step through how the 
browser retrieves and displays this page when it is requested from 


http://wickedlysmart.com/lounge/: Behind 
@) First, the browser retrieves the file “elixir.html" from the server. the Scenes 

Empty browser window} nothing retrieved yet. 

Feo as. oe T 

Ata tay rere ee oe 

file ‘eli; 
ae AT En, 
Browser 


@ Next the browser reads the “elixir.html" file, displays it, and sees it 


has four images to retrieve. So, it needs to get each one from the web 
server, starting with “green.jpg". 


The HTML page is retrieved, but the browser 
still needs to get the images. 


ea =o ’ 
UE | Naas Be eee be shee Le 


aD Te LA a a, ad TT 
Es 2 pe ee | ee ee a a 


Gaephee yy Le Comers lor 


Ce i 
cesta oe meme poe moan bon lea me ane | ” 
Pou 
Heke Bis Eis 


Web Server 


grad mis ee te ee a Te 
a ee ee 2 -e 


Browser 
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how browsers load images 


@ 
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Having just retrieved “green.jpg", the browser displays it and then 
moves on to the next image: “lightblue. jpg”. 


ee — 
J Eee eee a 
T need ligh 
= ci » \ke 'ghr, 
room Tea Caco “green. jp 9 oo® Sie . 


8 ee 


i a displayed. 


CCS Se LA A a) « be aa 
CT a <fhent> 
Gtaephee yy Le Comers 

= Lawl 
ina! 
i teat 
aa, ee lt Ge pea ane pe oe ee | Ls 
sais i ro ids a ori 
Bhaterry Bis Elsie 


Web Server 


Scots mio: De me ee 
a ee ee ee 2 es ~ 


Browser 


Now the browser has retrieved “lightblue.jpg", so it displays that 
image and then moves on to the next image, “blue.jpg". This process 
continues for each image in the page. 


Lee sheers ‘ 
J ee eee 


we L need blye . 
\oo¥® is * bo, 
“ 


AC, A - COIL , ad D T 
a 2 en ee ee ed 


Ghee yp Lee 0 omen aloe 


“lightblue.jpq” ab 
| displayed. ee | 


Mogterry Bie Elsie 


Web Sever we A 


Sco mio De ce ee 
a Pe ee 2 es ~ 


Browser 
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How images work 


Images are just images, right? Well, actually there are a zillion formats for 
images out there in the world, all with their own strengths and weaknesses. 
But luckily, only three of those formats are commonly used on the Web: 
JPEG, PNG, and GIF. The only tricky part is deciding which to use when. 


So, what are the differences among JPEG, PNG, and GIF? 


iad 


complex graphics 


Works best for continuous 
tone images, like 
photographs. 


Can represent images with 
up to 16 million different 
colors. 


Isa “lossy” format 
because to reduce the file 
size, it throws away some 
information about the 
image. 

Does not support 
transparency. 


Files are smaller for more 
efficient web pages. 


No support for animation. 


a 


images 


Use PNG or GIF for images with solid 
colors, logos, and geometric shapes. 


PNG works best for images with a 
few solid colors, and images with 
lines, like logos, clip art, and small 
text in images. 


PNG can represent images with 
millions of different colors. PNG 
comes in three flavors: PNG-8, 
PNG-24, and PNG-32, depending 
on how many colors you need to 
represent. 


PNG compresses the file to reduce 
its size, but doesn’t throw anything 
way. So, it is a “lossless” format. 


Allows colors to be set to 
“transparent” so that anything 
underneath the image will show 
through. 


Files tend to be larger than their 
JPEG equivalents, but can be 
smaller or larger than GIF depending 
on the number of colors used. 
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Like PNG, GIF works best 
for images with a few solid 
colors, and images with 
lines, like logos, clip art, 
and small text in images. 


GIF can represent images 


with up to 256 different 
colors. 


GIF is also a “lossless” 
format. 


GIF also supports 
transparency, but allows 
only one color to be set to 
“transparent.” 


Files tend to be larger than 
their JPEG equivalents. 


Supports animation. 
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differences between gif, jog, and pn¢ 


Head First: Well, hello everyone. I think this might be 
the first time we’ve interviewed three interviewees at once! 


JPEG: Hey there, and hey to GIF and PNG. 


GIF: I’m not sure why I have to share the interview 
couch with these other bozos. Everyone knows GIF is the 
original image format of the Web. 


JPEG: Ha! As soon as you get good at representing 
complex images, like photos, maybe then people will take 
you seriously again, but I’m not sure how you're going to 
do that with only 256 colors. 


Head First: PNG, help us out here? You’ve been kind of 
quiet so far... 


PNG: Yeah, it’s easy to be quiet when you’re #1. I can 
represent complex images like JPEG and I’m also lossless 
like GIF. Truly the best of both worlds. 


Head First: Lossless? 


PNG: Right; when you store an image in a lossless 
format, you don’t lose any of the information, or detail, in 
the image. 


GIF: Me too! I’m lossless too, you know. 


Head First: Well, why would anyone want a lossy 
format? 


JPEG: There’s always a tradeoff. Sometimes what you 
want is a fairly small file you can download fast, but that 
has great quality. We don’t always need perfect quality. 
People are very happy with JPEG images. 


PNG: Sure, sure, but have you ever looked at lines, logos, 
small text, solid colors? They don’t look so great with 


JPEG. 


Head First: Wait a sec, JPEG raises an interesting issue. 
So GIF and PNG, are your file sizes large? 


PNG: I'll admit my file sizes can be on the large size 
sometimes, but I provide three formats so you can right- 
size your images: PNG-8, PNG-24, and PNG-32. 
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Would the real image format please stand up? 


This week’s interview: Image formats mix it up 


GIF: Sounds like complexity to me—more things for your 
users to remember. 


PNG: Well, GIF, wouldn’t the world be nice if we could 
fit all images into 256 colors? But we can’t. 


GIF: Hey, for line drawings, figures, that kind of thing, it’s 
often very easy to fit images into 8 bits, and for that I look 
great. 


JPEG: Ha, when is the last time you saw a photo stored 
in GIF? People have figured out your downsides, GIF 


GIF: Did I mention I can be transparent? You can take 
parts of me, and anything behind me shows right through. 


PNG: You can’t compete with me on that one, GIF I can 
set any number of colors to transparent; you are limited to 
one color. 


GIF: One color or many, who cares? One is all you need. 


PNG: Not if you want to have anti-aliased transparent 
areas in your image! 


GIF: Huh? 


PNG: Yeah, you know, because I allow more than one 
color to be transparent, so you can have nice soft edges 
around the transparent areas. 


Head First: That sounds like a nice feature. Can you do 
that, JPEG? 


JPEG: No, but I’m not too worried about it; there aren’t 
many photos you’d want to do that to. That’s for logos. 


PNG: Hmmn,, I’m seeing my transparency used all over 


the Web. 


Head First: Well, Pll have to think twice before doing a 
three-person interview again, but it sounds to me like GIF 
and PNG, you're great for logos and text images; JPEG, 
you're great for photos; and PNG, you come in handy if 
we want transparency as well as lots of colors. Bye! 


PNG, JPEG, GIF: Wait, no, hold on!!! 
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adding images to your pages 


* 


* * : >, *K 


WHICH IMAGE FORMAT? 


Congratulations: you've been elected “Grand Image Format Chooser” of the day. For 
each image below, choose the format that would best represent it for the Web. 


JPEG or PNG or GIF 


a LJ L 


you are here > 169 


www.it-ebooks.info 


introducing the <img> element 


Uh, I don't mean to be 
rude, but we're on the eighth 

page of the IMAGES chapter and 
you STILL haven't introduced me! 
JPEG, PNG, GIF, blah, blah, blah... 
could you get on with it? 


<img> 


And now for the formal introduction: meet 
the <img> element. 


We've held off on the introductions long enough. As you can see, 
there’s more to dealing with images than just the HTML markup. 
Anyway, enough of that for now...it’s time to meet the <img> 
element. 


Let’s start by taking a closer look at the element (although you’ve 
probably already picked up on most of how <img> works by now): 


The <imo> element is an inline 
element. It doesn't cause 
linebreaks to be inserted before 


Here's the <imo> element. or after it. y 


t 


<img src="images/drinks.gif"> 


The sve attribute specifies the location You already know 
of an image File to be included in the <img> is a void 
display of the web page. element. 


So, is that it? Not quite. There are a couple of attributes you'll 
want to know about. And of course you'll also want to know how 
to use the <img> element to reference images on the Web that 
aren’t on your own site. But really, you already know the basics of 
using the <img> element. 


Let’s work through a few of the finer points of using the <img> 
element, and then put all this knowledge to work. 
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<img>: it’s not just relative links anymore 


The src attribute can be used for more than just relative links; you can also put a URL in 
your src attribute. Images are stored on web servers right alongside HTML pages, so every 
image on the Web has its own URL, just like web pages do. 


You'll generally want to use a URL for an image if you’re pointing to an image at a different 
website (remember, for links and images on the same site, it’s better to use relative paths). 


Here’s how you link to an image using a URL: 


<img src="http://www.starbuzzcoffee.com/images/corporate/ceo.jpg"> 


C To in¢lude an image using its URL, The URL is the path to the image, 
just put the whole URL of the so the filename at the end is always 
image in the sre attribute. the Filename of an image. There's 


no such thing as a default image like 
there is for web pages. 


your pencil 


Here’s a “Sharpen your pencil” that is actually about pencils (oh, and images too). This exercise 
involves a bit of trivia: Given a typical, brand-new pencil, if you drew one continuous line with it, 
using the entire pencil up, how long would the line be? 


What's that got to do with images? To find the answer, you're going to have to write some HTML. 
The answer to this trivia is contained in the image that is at the URL http://wickedlysmart.com/ 
hfhtmlcss/trivia/pencil.png. Your job is to add an image to this HTML and retrieve the answer: 


<html> 
<head> 


<title>Sharpen your pencil trivia</title> 
</head> 
<body> 


<p>How long a line can you draw with the typical pencil?</p> 


. Put your image element here. 


<p> 


</p> 
</body> 
</html> 
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questions about 


Q: So the <img> element is quite 
simple—it just provides a way to specify 
the location of the image that needs to be 
displayed in the page? 


A: Yes, that about sums it up. We'll talk 

about a couple of attributes you can add to 
the element. Later, you'll see a number of 

ways to use CSS to change the visual style 
of an image. 


But there’s a lot to know about the images 
themselves. What are the different image 
formats for? When should | use one over the 
other? How big should they be? How do | 
prepare images for use in a web page? 


Q: We've learned that void elements 
are elements without content or a closing 
tag. We've also learned that the <img> 
element is void. But doesn’t it have 
content (the image)? 


A: Well, to be more precise, a void 
element is an element that doesn’t have any 
content in the HTML page to put the opening 
and closing tags around. True, an image 

is content, but the <img> element refers to 
the image. The image isn’t part of the HTML 
page itself. Instead, the image replaces the 
<img> element when the browser displays 
the page. And remember, HTML pages 

are purely text, so the image could never 

be directly part of the page. It’s always a 
separate thing. 
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Dumb Questions 


Q: Back to the example of a web page 
loading with images...when | load a web 
page, | don’t see the images loading one 
after the other. Why? 


A: Browsers often retrieve the images 
concurrently. That is, the browser makes 
requests for multiple images at the same 
time. Given the speed of computers and 
networks, this all happens fast enough that 
you usually see a page display along with its 
images. 


Q: If | see an image on a web page, 
how do | determine its URL so that I can 
link to it? 


A: Most browsers allow you to right-click 
on an image, which brings up a contextual 
menu with some choices. In these choices, 
you should see “Copy Image Address” or 
“Copy Image Link,” which will place the 

URL in your clipboard. Another way to find 
the URL is to right-click and choose “Open 
Image in New Window,” which will open 

the image in a browser window. Then you 
can get the URL of the image from the 
browser’s address bar. A last option is to use 
your browser's View Source menu option 
and look through the HTML. Keep in mind, 
though, you might find a relative link to the 
image, so you'll have to “reconstruct” the 
URL using the website domain name and the 
path of the image. 
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Q: What makes a JPEG photo better 
than a GIF or PNG photo, or a GIF or PNG 
logo better than a JPEG logo? 


A: “Better” is usually defined as some 
combination of image quality and file size. 

A JPEG photo will usually be much smaller 
than an equivalent-quality PNG or GIF, while 
a PNG or GIF logo will usually look better, 
and may have a smaller file size than in 
JPEG format. 


Q: How do | choose between GIF and 
PNG? It seems like they are very similar. 


A: PNG is the latest newcomer in graphic 
formats, and an interesting one because it 
can support both photos as well as logos. 

It also has more advanced transparency 
features than GIF. PNG is supported by all 
major browsers now, which wasn’t true just a 
few years ago. 


To choose between GIF and PNG, there 
are a few things to consider. First, PNG 
has slightly better compression than GIF, 
so for an image with the same number of 
colors (i.e., up to 256), your PNG file may 
be smaller. If you need more colors than 
GIF can offer, and JPEG isn’t an option (for 
instance, you need transparency), PNG is 
definitely the way to go. However, if you 
need animation, then you should go with GIF 
because GIF is the only widely supported 
format that supports animation. 
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Always provide an alternative 


One thing you can be sure of on the Web is that you never know exactly which 
browsers and devices will be used to view your pages. Visitors are likely to show 
up with mobile devices, screen readers for the visually impaired, browsers that are 
running over very slow Internet connections (and may retrieve only the text, not 
the images, of a site), cell phones, Internet-enabled T-shirts... Who knows? 


But in the middle of all this uncertainty, you can be prepared. Even if a browser can’t 
display the images on your page, there is an alternative. You can give the visitor 
some indication of what information is in the image using the <img> eclement’s 
alt attribute. Here’s how it works: 


<img src="http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png" 


alt="The typical new pencil can draw a line 35 miles long."> 


— If the image can't be displayed, then this 
The alt attribute requires a bit of bent is used in its place. It’s like if you 
text that describes the image. were reading the web page over the phone 
to someone, the alt text is what you'd say 
in place of the image. 


In this exercise you're going to see how your browser handles the alt attribute when you have 
—_ a broken image. The theory goes that if an image can’t be found, the alt attribute is displayed 
Exercise instead. But not all browsers implement this, so your results may vary. Here’s what you need to do: 


e Take your HTML from the previous exercise. 


2] Update the image element to include the alt attribute 
“The typical new pencil can draw a line 35 miles long.” 


3) Change the image name of “pencil.png” to “broken.png”. This 
image doesn’t actually exist, so you'll get a broken image. 


(4 ) Reload the page in your browser. 


5 } Finally, download a couple of other browsers and give this a 

try. Did you get different results? 
For instante, You could try Firefox 
(ntte:// www-mozilla.ora/) or Opera 


Look at the end of the chapter to see our results... (nbbp:/ /www-opera.com/). 
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<img> element 


Sizing up your images 


There’s one last attribute of the <img> element you should know about— 
actually, they’re a pair of attributes: width and height. You can use these 
attributes to tell the browser, up front, the size of an image in your page. 


Here’s how you use width and height: 


<img src="images/drinks.gif" width="48" height="100"> 


p 


The width attribute tells the 
browser how wide the image 
should appear in the page. 


Both width and height are specified using the number of pixels. If 
youre not familiar with pixels, we'll go into what they are in a little 
more detail later in this chapter. You can add width and height 
attributes to any image; if you don’t, the browser will automatically 
determine the size of the image before displaying it in the page. 


Q: Why would | ever use these 
attributes if the browser just figures it out 
anyway? 


A: On many browsers, if you supply the 
width and height in your HTML, then the 
browser can get a head start laying out the 
page before displaying it. If you don’t, the 
browser often has to readjust the page 
layout after it knows the size of an image. 
Remember, the browser downloads images 
after it downloads the HTML file and begins 
to display the page. The browser can’t know 
the size of the images before it downloads 
them unless you tell it. 


You can also supply width and height values 


that are larger or smaller than the size of the 
image and the browser will scale the image 
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to fit those dimensions. Many people do 
this when they need to display an existing 
image at a size that is larger or smaller than 
its original dimensions. As you'll see later, 
however, there are many reasons not to use 
width and height for this purpose. 


Q: Do I have to use these attributes 
in pairs? Can | just specify a width or a 
height? 


A: You can, but if you're going to go to 
the trouble to tell the browser one dimension, 
supplying the second dimension is about the 
same amount of work (and there isn’t a lot 

to be gained by supplying just a width or a 
height unless you're scaling the image to a 
particular width or height). 
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The height attribute 
tells the browser how 
tall the image should 
appear in the page: 


Q: We’ve said many times that we 
are supposed to use HTML for structure, 
and not for presentation. These feel like 
presentation attributes. Am | wrong? 


A: It depends on how you are using these 
attributes. If you’re setting the image width 
and height to the correct dimensions, then it 
is really just informational. However, if you 
are using the width and height to resize the 
image in the browser, then you are using 
these attributes for presentation. In that case, 
it's probably better to consider using CSS to 
achieve the same result. 
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Creating the ultimate fan site: myPod 
nR_- iPhones are fine tool 


iPod owners love their iPods, and they take them 
everywhere. Imagine creating a new site called “myPod” 
to display pictures of your friends and their iPods from 


their favorite locations, all around the world. . 


What do you need to get started? Just some knowledge 
of HTML, some images, and a love for your iPod. 


We've already written some of the HTML for this site, 
but we haven’t added the images yet—that’s where you 
come in. But before you get to the images, let’s get things 
set up; look for the “chapter5” folder in the sample 
source for the book. There you'll find a folder named 

“mypod”. Open the “mypod” folder, and here’s what 
you'll see inside: 


(' My iPod in Seattle! You can see 
the Space Needle. You can’t see 
the 628 coffee shops. 


You'll find this in the 

aia tall me We've already written some 
of the HTML for the 
myPod site. You'll find it 
in the “ander btrnl” file. 


Here’s the first iPod 
image: an image of Seattle. 


seattle.jpg 


We're going to use the - vou'll Lind a couple of other folders 
photos folder to hold He ve ae but ignore those for now: 
the images for the site. 7 
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Check out myPod’s “index.html” file 


Open up the file “index.html”, and you'll see work has already 
begun on myPod. Here’s the HTML so far: 


We threw in some Reavy BaKe c$9 here: 
Just type this in for now. All it does is give 
light green background. We'll be 


<html> 
<head> 
<title>myPod</title> 


he page a ; 
<style type="text/css"> led to CSS na few chapters, promise! 
body { background-color: #eaf3da;} x) 9 
</style> 
</head> 
iad VN This HTML should look familiar, as we're using 


<hi>iWelcome to myPod</b1> the basi¢ building blocks: <hl>, <h2>, and <p>. 


<p> 
Welcome to the place to show off your iPod, wherever you might be. 
Wanna join the fun? All you need is any iPod from the early classic 
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest 
iPod Video, and a digital camera. Just take a snapshot of your iPod in 
your favorite location and we'll be glad to post it on myPod. So, what 
are you waiting for? 

</p> 


<h2>Seattle, Washington</h2> 
<p> 
Me and my iPod in Seattle! You can see the 
Space Needle. You can't see the 628 coffee shops. 


</p> 
en 
</body> BASE meet eee ee 
[7eteeeeeeee ee 
</html> Weleame oo nny Pod lel 


ee arta Ps, id aman fis Saeataa wo cae, 
Fe pe Sa ps ge et ra ras 


And here’s how it looks Satay Reet eT ee Pe Yn at ee ge 
in the browser. Not bad, 
but we need images. 


St 
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Weicemr in ny Peal 
Spree tee ape pe em ee el shears ey git ey pie ear a - 
sag. Piad sh san rupee Ped eos Same (Pro Ps tr smacioa ed Wa degra 


Vides, ad bs epi camer, ean cae: amas ad poral i pe Sleeper Cee al wr bon taal 
eee ee ee be ee ee 


atk, Fala 


fe oy id Ps ce pe RP etl eal eg 


As you can see, a lot of the HTML is already written to 
get myPod up and running. All you need to do is add 
an <img> element for each photo you want to include. 
There’s one photo so far, “seattle_video.jpg’, so go 
ahead and add an element to place that image in the 
page below. When you've finished, load the page in We need an 
your browser and check out the view of Seattle. 


image right here. 


<html> 
<head> 
<title>myPod</title> 
<style type="text/css"> 
body { background-color: #eaf3da;} 
</style> 


</head> 
<body> This is where you need to 


place the first. photo. 


<hl>Welcome to myPod</hi> 

<p> 
Welcome to the place to show off your iPod, wherever you might be. 
Wanna join the fun? All you need is any iPod from, the early classic 
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest 
iPod Video, and a digital camera. Just take a snapshot of your iPod in 
your favorite location and we'll be glad to post it on myPod. So, what 
are you waiting for? 

</p> 


<h2>Seattle, Washington</h2> 
<p> 

Me and my iPod in Seattle! You can see the 

Space Needle. You can't see the 628 coffee shops. 
</p> 


<p> 
Your: <imo> element is 


———_—> going, to 90 right here. 
</p> 


</body> 
</html> 
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the image is too big 


Whoa! The image is way too large 


If the image 
Well, the image is right there where it should be, but that is one fits nicely in 
large image. Then again, most of the images that come from digital rf r ' ind abies 
cameras these days are that large (or larger). Should we just leave ate it! ue seicta 
the image like it is and let visitors use the scroll bar? You’re going to : may have an “auto ima ge 
see there are a couple of reasons why that’s a bad idea. : resize” option turned on. 


: More on thi 
Let’s take a look at the image and the browser and see just how bad this in just a sec... 


this situation is... Tentuesieageatasescusasedseliaeelaevesiciancesct 
Here’s our browser: It’s about the 
size of the typical browser window. 


And here's the “seattle.jpq” image you 
added to “index.html.” 


= 
tad + * br | A agent ea aby in 
Welcome to myPod 
Welexese fe che ‘ee all peur Pd eer wraps be Wiens Fer: Hee Fee? A ey ceed i F ; 
eared tea rent ls at ae en Ge fel Seamer ncs meta ia ea ea a Here’s the full size of the image, 


Sgentipeitn revue rena vend ai ptosis lc which is bigger than the size ot the 
shan : browser window...much bigger. 


Seattle, Washingtos 
fe ded oo (Ped id Seance! Pio ces oe the Spor Needle. Woks can) ae the GE cediee does. 


We éould use the séroll 
bars to see the rest of 
the image, but wouldn't 
it be better if we could 
Fit this image into the 


browser window? 


ST. Newser 


window is abou 


BOO pixels wide. 


The image is 1,200 pixels wide. 
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b Questions 


pum 


Q: What’s wrong with having the user just use the scroll bar 
to see the image? 


A: In general, web pages with large images are hard to use. Not 
only can your visitors not see the entire image at once, but also using 
scroll bars is cumbersome. Large images also require more data to 
be transferred between the server and your browser, which takes a 
lot of time and may result in your page being very slow to display, 
particularly for users on dial-up or other slow connections. 


Q: Why can’t | just use the width and height attributes to 
resize the images on the page? 


A: Because the browser still has to retrieve the entire large image 
before it scales it down to fit your page. 


Q: You said the browser window is 800 pixels wide; what 
exactly does that mean? 


A: Your computer's display is made up of millions of dots called 
pixels. If you look very closely at your display, you'll see them: 


Here's a lot 
of pixels that 
together make up ) 
the upper part of 

the right wind, of 
the butterfly. 


Here’s one pixel. 


This image is made up 
of thousands of pixels 
when it’s displayed on a 
computer streen. 


adding images to your pages 


And while screen sizes and resolutions tend to vary (some people 
have small monitors, some large), most people typically set their 
browsers to somewhere between 800 and 1,280 pixels wide. So, 
around 800 pixels is a good rule of thumb for the maximum width of 
your images (and your web pages too, but we'll get to that in a later 
chapter). 


Q: How do the number of pixels relate to the size of the 
image on the screen? 


A: A good rule of thumb is 96 pixels to every inch, although with 
today’s high resolution monitors and retinal displays, it can go higher. 
We used to use a standard of 72 pixels per inch (ppi), but to handle 
modern displays, the concept of a CSS pixel has been created. The 
CSS pixel is 1/96 of an inch (96 ppi). So for a 3” wide x 3” high image, 
you'd use 96 (pixels) x 3 (inches) = 288 x 288 pixels. 


6 Well, how large should | make my images then? 


A: In general, you want to keep the width of your image to less 
than 800 pixels wide. Of course, you may want your images to be 
significantly smaller (or somewhat larger) depending on what you're 
using the image for. What if the image is a logo for your page? You 
probably want that small, but still readable. After all, you don’t need 
a logo the width of the entire web page. Logos tend to run between 
100 and 200 pixels wide. So, ultimately, the answer to your question 
depends on the design of your page. For photos—which you usually 
do want to view as large as possible—you may want to have a page 
of small thumbnail images that load quickly, and then allow the user 
to click on each thumbnail to see a larger version of the image. We'll 
get to all that shortly. 


Q: | think my browser automatically resized the image of 
Seattle, because it fits perfectly in the window. Why did my 
browser do this? 


A: Some browsers have a feature that resizes any image that 
doesn’t fit within the width of your browser. But many browsers don’t 
do this, so you don’t want to rely on it. Even if every browser did have 
this feature, you'd still be transferring a lot more data than necessary 
between the server and browser, which would make your page slow 
to load and less usable. And keep in mind that an increasing number 
of people are viewing web pages on mobile devices, and large 
images will impact data usage on these devices. 
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Resize the image to fit in the browser 


Let’s fix up this image so it fits the browser page better. Right now, this image 
is 1,200 pixels wide by 800 pixels tall (you'll see how to determine that in a sec). 
Because we want the width of the image to be less than 800 pixels, we need to 
decide on a width that would fit our myPod web page nicely. The whole point 
of myPod is viewing photos of iPods in their surroundings, so we probably 
want to have reasonably large images. If we reduce this image size by one-half 
to 600 pixels wide by 400 pixels high, that will still take up most of the browser 
width, while still allowing for a little space on the sides. Sound good? Let’s get 
this image resized... 


4—_|,200 yixels ee 


We need to vesize the 

image so that it’s still 

reasonably large, but 

} is less than 800 pixels 

| LOO}pixels N wide. 600 seems like a 
| A\ nice width that happens 

to be one-half the 


800 
pixels jp current size. 
\ 400 


ro) 


Here’s what you're going to do: 
e Open the image using a photo editing application. 
2) Reduce the image size by one-half (to 600 pixels by 400 pixels). 


(3) Save the image as “seattle_video_med.jpg”. 


180 Chapter 5 


www.it-ebooks.info 


[£ Ou don’t h 
you like 40 fie Adobe 


with ' 


adding images to your pages 


are we 


7 


Photoshop E 


Before we get started, 
which photo editing application 


the image? I have Photoshop 
Elements. Will that work? 


going to use to resize 


Good question—there are lots of photo editing 
applications on the market (some freely available), 
which are all quite similar. We’re going to use 
Adobe’s Photoshop Elements to resize the images, 
because it is one of the most popular photo 
editing applications, and is available on both 
Windows and the Macintosh. If you own another 
photo editing application, you should have no 
problem following along and translating each 
editing task to your own application. 


If you don’t yet have a photo editing application, 
you might first check to see if there was one 
included with your operating system. If you have 
a Mac, you can use 1Photo to edit your photos. If 
you're a Windows user, you might find Microsoft’s 
Digital Image Suite on your computer already. If 
you still don’t have an editing application available 
to you, follow along and for each step, you can use 
the HTML and images included in the example 
folders. 
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Open the image 


First, start your photo editing application and open the “seattle_video. 
Jpg” image. In Photoshop Elements, you’ll want to choose the “Open...” 
menu option under the File menu, which will open the Open dialog box. 
You're going to use this to navigate to the image “seattle_video.jpg” in the 
“chapter5/mypod/photos” folder. 


Heve’s the Open dialog - As you navigate through folders, you'll see a 
Use aT. is nay preview of the images in those folders here. 
the “seattle_video.)P4 may 


ieee Wiedi/ie Hele 


uo Get irage Eshaorce Layee Soe Fier 


@ Adcte Phatcahap Elemenia bdiier | F 


: = # 


doe Al Speedie Doce ae 


i 2H Bil 


When you've located the 


“seattle_video.jpq” image, 
click Open to open it. 
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Resizing the image 


Now that “seattle_video.jpg” 1s open, we’re going to use the “Save for Web” 
dialog to both resize the image and save it. To get to that dialog box, just 
choose the “Save for Web” menu option from the File menu. 


) « ideo.\P9) To resize the image, Choose “Save 
the “‘seattle_video,) esize the image, 
las an Photoshor Elements: for Web” from the File menu. 


‘ $Adgabe Phocaskop Gereerce £)/ior | ie Gat brags inkeece Layer Select Filter 
Ree 
Goan. 
Deer Kerry Booted Fie 
Ohpl karte 


‘Ween \ Aatcesy ibhip 


js Se es 


avs Bit. 
Fee lets. 
Pigs 

(2 Cegueaee Cpe Fates. 
Process Mpitiple Filey 
nnTry 


am Piel 
Order Prints, 


Cartan: eso 


Priore Backage 
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Resizing the image, continued... 


After you’ve selected the “Save for Web” menu option, you should see the 
dialog box below; let’s get acquainted with it before we use it. 


This dialog lets you do all kinds of interesting things. For a ens nai - itr i 
now, were going, to foetus on how to use it to resize and save a: Ge, sina salir y : s on to 
images in JPEG format for web pages- going nge this 


JPEG ina couple of Pages... 


tes 1S a i cae 


Ss 

ety 

roel ea | 
a 


Here's the 
current size 

of the image: 
1,200 pixels by 
800 pixels. 


Fins | 
ne A | eee wisest 


This split window shows You 


ee ee the left, ine 
in the fovmat Y original image on the le and the i age 


you're saving it for the Web on the right. Currently this is 
showing GIF format; we'll be changing this to JPEG in an upcoming, step. 
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As you can see, there’s a lot of functionality built into this 
dialog. Let’s put it to good use. To resize the image, you 
need to change the width to 600 pixels and the height 

to 400 pixels. Then you need to save the image in JPEG 


format. Let’s start with the resize... (1) Change the image size here 


to a width of 600 and a height 
of 400. If you have Constrain 
Proportions checked, then all you 
have to do is type the new width, 
£00, and Elements will change the 
height to 400 for You. 


Ce | compe A ede ov eh : 
i cee ere 


(2) Once the width and 
height ave set correctly, 
click Apply to let 
Elements know this is 
the size You want. 


This will not affect the original image, 
just the File you're going to save. 


You must click Apply to reduce the image size; otherwise, 
the image will be saved at its original width and height. 
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You've resized—now save 


Now you just need to save the image in the correct format 
(JPEG). To do that, you need to choose JPEG format and set 
the quality to Medium. We'll talk more about quality in a sec. 


(1) Now that the image size is set, 
ou just need to choose the format 
‘or the image. Currently it’s set to 


save as GIF; change this to JPEG (2) Set the quality to Medium. 


like we've done here. 


(3) That’s it; 
click OK and 
90 to the next 
Page. 


aed 


‘nee Ls . a, $$  $ <<< 
Resa kpoay mes es — 
= Fe | ery | 


Notice that when you clicked Apply 
in the previous step, the image was 
resized and vedisplayed. 
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Save the image 


After you click OK, you'll get a Save dialog, Save the image as 
“seattle_video_med.jpg” so you don’t overwrite the original photo. 


adding images to your pages 


Change the filename to seattle_video_med.jpo, 


so = ee 
Seve Aa: [seattle video_med jpg| . | 


Whore: | |) photos Ez 


—s 


Notice that you've changing the filename from “seattle_video.jpq” 
to “seattle_video_med.jpq’. Why? People usually like to save their 
original, high—auality, big photos for printing, and put smaller 
versions on the Web. |f you saved this as “seattle_video.jpq’, 


you'd be losing the original photo! 


Q: Can you say more about the quality 
setting in “Save for Web”? 


A: The JPEG format allows you to specify 
the level of image quality you need. The 
lower the quality, the smaller the file size. If 
you look at the preview pane in the “Save 
for Web” dialog, you can see both the quality 
and file size change as you change the 
quality settings. 


ac —+ Image format 
L6 
; ae ine iter 


Image size (IK ¢ ual 
WOOF bls i, 


Photoshop Elements even 
tells you how long it would 
take to transfer over a 
dial-up modem to a browser. 


size). 
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The best way to get a feel for quality 
settings and the various image formats is to 
experiment with them on your own images. 
You'll soon figure out what quality levels 
are needed for your image and the type of 
web page you're developing. You'll also get 
to know when to use JPEG versus other 
formats. 


Q: What is the number 30 next to the 
Quality label in the JPEG Options dialog 
box? 


A: The number 30 is what Photoshop 
Elements considers Medium quality. JPEG 
actually uses a scale of 1-100%, and Low, 
Medium, High, etc. are just preset values 
that many photo editing applications use. 
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_— saving the image in the 
“mypod/ photos’ folder. 


\ Click Save to 


save the image. 


Gp: Couldn’t | just use the <img> 
element’s width and height attributes to 
resize my image instead? 


A: You could use the width and height 
attributes to resize an image, but that’s not 

a good idea. Why? Because if you do that, 
you're still downloading the full-size image, 
and making the browser do the work to 
resize the image (just like when you have 
the auto resize option on in browsers that 
support that feature). The width and height 
attributes are really there to help the browser 
figure out how much space to reserve for the 
image; if you use them, they should match 
the actual width and height of the image. 
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Fixing up the myPod HTML 


Once you’ve saved the image, you can close Photoshop Elements. Now all you need to do 1s change the 
myPod “index.html” page to include the new version of the photo, “seattle_video_med.jpg”. Here’s a 
snippet of the “index.html” file, showing only the parts you need to change. 


<html> 
<head> 
<title>myPod</title> 
<style type="text/css"> 
body { background-color: #eaf3da;} 


we The vest of the HTML goes here. You've 


cl Sg already got it in Your “Gndex-html” file. 
; go All you need to do is Change the 
Lilename in the <img> element to 


the name of the image you just 


<h2>Seattle, Washington</h2> satis “seattle video_med.jp9 ; 


<p> 
Me and my iPod in Seattle! Yo 
Space Needle. You can't see 
</p> 


can see the 
e 628 coffee shops. 


<p> 
<img src="photos/seattle video med.jpg" alt="My iPod in Seattle, WA"> 
</p> 


</body> 
</html> 


And now for the test drive.. sige Gs 


SS i pha i cas, 
Go ahead and make the changes, save them, and Cee are ee et restos ga TA res cnn pag 
Lee 


reload “index.html” in your browser. Things 
should look much better. Now the image is sized 
just right to give your visitors a good view—without 
overwhelming them with a large photo. 


Now the image fits nicely in the 
browser window. And it’s a smaller 
File size too, which will help the 
Page load more quickly. 
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WH ICH ILRAAGE FORMAT? 
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Your task this time: open the file “chapter5/testimage/eye.jpg” in Photoshop Elements. Open the “Save for Web” 
dialog and fill in the blanks below by choosing each quality setting for JPEG (Low, Medium, High, etc.), as well as 
PNG-24 and GIF. You'll find this information in the preview pane below the ee Once you've finished, determine 


which setting makes the most sense for this image. me Format 
\s ae Baa Size of image 


5 ec 2B ice — Time to transfer over 
dial-up modem 


Format Quality Size Time Winner 


Try PNG-8 tool 


XG PNG-24 


Maximum 
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More photos for myPod 


A new batch of photos has arrived for myPod: three more from Seattle and a few from 
a friend in Britain. The photos have already been resized to less than 800 pixels wide. 
Add the <img> elements for them (you'll find the images already in the photos folder): 


<html> 


<head> 


Feel free to ad 
<title>myPod</title> h d some of Your 
- é own Photos here as well. Just 
<style type="text/css"> ~ Neer oeane f 
body { background-color: #eaf3da;} member resize them first. 
</style> 


</head> 
<body> 


<h1l>Welcome to myPod</h1i> 

<p> 
Welcome to the place to show off your iPod, wherever you might be. 
Wanna join the fun? All you need is any iPod, from the early classic 
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest 
iPod Video, and a digital camera. Just take a snapshot of your iPod in 
your favorite location and we'll be glad to post it on myPod. So, what 
are you waiting for? 

</p> 


<h2>Seattle, Washington</h2> 


<p> 
Me and my iPod in Seattle! You can see the Let's keep all the 
Space Needle. You can't see the 628 coffee shops. Seattle photos tonether 
</p> 3 
<p> 


<img src="photos/seattle video med.jpg" alt="My video iPod in Seattle, WA"> 
<img src="photos/seattle classic.jpg" alt="A classic iPod in Seattle, WA"> 
<img src="photos/seattle shuffle.jpg" alt="An iPod Shuffle in Seattle, WA"> 
<img src="photos/seattle_downtown.jpg" alt="An iPod in downtown Seattle, WA"> 
</p> 
Same with the 
<h2>Birmingham, England</h2> an Birmingham photos... 
<p> 
Here are some iPod photos around Birmingham. We've obviously got some 
passionate folks over here who love their iPods. Check out the classic 
red British telephone box! 
</p> 


<p> 
<img src="photos/britain.jpg" alt="An iPod in Birmingham at a telephone box"> 
<img src="photos/applestore.jpg" alt="An iPod at the Birmingham Apple store"> 
</p> 


</body> 
</html> 
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Taking myPod for another test drive —<—_ 


At this point we don’t need to tell you to reload the page 
in your browser; we’re sure you're way ahead of us. Wow, 
what a difference a few images make, don’t you think? 
This page is starting to look downright interesting. 


But that doesn’t mean you're there yet. While you’ve got a 
great set of images on the page, and even though you’ve 
already resized them, the images are still quite large. Not 
only is the page going to load more and more slowly as 
you add more images, but also the user has to do a lot 


of scrolling to see them all. Wouldn’t it be better if users Here's what 
could see a small “thumbnail” image for each photo, and the whole page 
then click on the thumbnail to see the larger image? looks like now, 
with all the 
And here’s what the page images. 
looks like now, Close up. \ 
a sc 


Welcome to myPod 


VAlriaonne fo fhe plat to dao od per dad, ehecrver yom might be. Wun prod the Bar? Ad pee 

ied a aay Pat, dood hee arty clams Ud 1 tee Lat Pat a, he ane iPod Swi bo cha 
[iepenn Peed Wickes, ee a) eae. SL cake ne pee ee ey Ped on ne Tae kee 
ep ee) be ge poet fom meal, eo, Shee are ee ee eg fer? 


Seattle, Washington 


Prbc malt aay "cad la eacake! Vu Case te pce i. Ye can ae Lee CD cles Bb 


vid 
- aided a TT 


you are here > 191 


www.it-ebooks.info 


using 


Reworking the site to use thumbnails 


You’re now going to make this page more usable by substituting a 
smaller image (which we call a thumbnail) for each photo, and then you'll 
create a link from that thumbnail to each of the larger photos. Here’s 
how yow’re going to do this, one step at a time: 


1) Create a new directory for the thumbnails. 


2] Resize each photo to 150 by 100 pixels and save it ina 
“thumbnail” folder. 


Set the src of each <img> element in “index.html” 
to the thumbnail version of the photo. 


4) Add a link from each thumbnail to a new page 
containing the larger photo. 


Create a new directory for thumbnails 


To keep things organized, create a separate folder for the thumbnail 
images. Otherwise, you'll end up with a folder of larger images 

and small thumbnails all lumped together, which could get quite 
cluttered after you’ve added a significant number of photos. 


Create a folder called “thumbnails” under the “mypod” folder. If 
youre working from the book example files, you'll find this folder 
already in there. 


index.html 


Create a new folder 
called “Lhumbnails” in 
the “mypod” folder. 
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Create the thumbnails 


You’ve got a place to put your thumbnails, so let’s create them. Start by 
opening “seattle_video_med.jpg” with your photo editing application. 
You’re going to resize it to 150 by 100 pixels using the same method you 
used to create the 600 by 400 version: 


Then Change the width Dene loraat 
hotochor Elements, : on t torget to change the 
ae ped Cor Web” to 150 and the height to format to JPEG, Medium quality. Finally, 
100 and click Apply. click OK. 


menu option. ‘ 


ra = 


=! = 
t= 


— ie (Sos — nag! — ae 


With the image resized, choose OK and save it as the same name but If you're working with the example 
in the thumbnail folder. Be careful: if you save it to the “photos” folder, Files, you'll find the thumbnails 
you'll be replacing the larger image. a4 already in the “thumbnails” folder, 

is fe h ph : “Dhotos” folder. so You don't have to do every one 
Now, repeat this for each photo in your “photos” folder. (altel you're learning HTML, 
not batch photo protessing). 


What about the photos 
from Birmingham—they are 
taller than they are wide. Does 
150x100 make sense? 


Good catch. Because these images are taller than 

they are wide, we have two choices: we can switch 

the dimensions and make them 100 by 150, or we 

can crop each image and make a 150-by-100-pixel 
thumbnail from it. We’re going to make ours 100. 7 
by 150; feel free to crop them and create 150-by- 

100-pixel images if you’d like to explore how to do 

that in your photo editing application. 
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Rework the HTML to use the thumbnails 


Now you Just need to change the HTML so that the <img> elements get their images from 
the “thumbnails” folder rather than the “photos” folder. And because you’re currently using 
relative paths like “photos/seattle_video_med.jpg”, that’s going to be simple: for each <img> 
element, all you need to do is change the folder from “photos” to “thumbnails”. 
<html> 
<head> 
<title>myPod</title> 
<style type="text/css"> 
body { background-color: #eaf3da;} 
</style> 
</head> 
<body> 
<h1l>Welcome to myPod</h1> 
<p> 
Welcome to the place to show off your iPod, wherever you might be. 
Wanna join the fun? All you need is any iPod, from the early classic 
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest 
iPod Video, and a digital camera. Just take a snapshot of your iPod in 
your favorite location and we'll be glad to post it on myPod. So, what 
are you waiting for? 
</p> 


All you need to do is change the 
<h2>Seattle, Washington</h2> 


folder fom “photos” to “thumbnails - 
<p> 
Me and my iPod in Seattle!/You can see the 
Space Needle. You can't s@e the 628 coffee shops. 
</p> 


<p> 
<img src="thumbnails/seattle video _med.jpg" alt="My video iPod in Seattle, WA"> 
<img src="thumbnails/seattle_classic.jpg" alt="A classic iPod in Seattle, WA"> 
<img src="thumbnails/seattle_shuffle.jpg" alt="An iPod Shuffle in Seattle, WA"> 
<img src="thumbnails/seattle_downtown.jpg" alt="An iPod in downtown Seattle, WA"> 
</p> 


<h2>Birmingham, England</h2> 

<p> 
Here are some iPod photos around Birmingham. We've obviously got some 
passionate folks over here who love their iPods. Check out the classic 
red British telephone box! 

</p> 


<p> 
<img src="thumbnails/britain.jpg" alt="An iPod in Birmingham at a telephone box"> 
<img src="thumbnails/applestore.jpg" alt="An iPod at the Birmingham Apple store"> 
</p> 
</body> 
</html> 
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Take myPod for another test drive 


a ann —e 
Abbh...much better. Visitors can see all the fn "loi "7 a 
ilable pictures at a glance. They can also tell ell 

pitta gels iis eta mes ences Welcome tn my Pod 
which photos go with each city more easily. Now we 

: : Wencorrs 5 ai Pics to shen off peur Boe, wtorrcr ] vy 
need to find a way to link from each thumbnail to ay He Becet it la il tary hare filter bili 

pal gs ern! ; 
the corresponding large image. etinflrcrtnpailes—anrenger stele nei tal ie pcr ieotiie haven aed well be 
Srabtic, Washinginn 


Moke dal peep Prt be eatin! pe ital are ie Byars Wieratie. Yves cat fer Pie 1 vere ey 


J mare 


Firminghom, England 


Herne ae ome Pod pens area AVE. Oa ne 
re : mi Rehan, ave etree ‘ 
viet b artiely : r ml Peenionare bain ver bere 


Wait a sec, don't 

you think you're pulling a 
fast one? The images used to 
be on top of each other; now 
they're side by side. 


rom) 


Right, but remember the <img> element is 
an inline element. 


In other words, we didn’t “pull anything.” Because <img> is 
displayed as an inline element, it doesn’t cause linebreaks to be 
inserted before and after the element is displayed. So, if there 
are several images together in your HTML, the browser will fit 
them side by side if the browser window is wide enough. 


The reason the larger photos weren’t side by side is because the 
browser didn’t have room to display them next to each other. 
Instead, it displayed them on top of each other. A browser 
always displays vertical space before and after a block element, 
and if you look back at the screenshots, you'll see the images 


are right on top of each other with no space in between. That’s 
another sign <img> is an inline element. 
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Turning the thumbnails into links 


You’re almost there. Now you just need to create a link from each 
thumbnail image to its larger version. Here’s how this is going to work: 


fy visitor sees a thumbnail she likes, 
say the downtown iPod thumbnail... 


_the visitor elieks 


on the thumbnail... the browser retrieves 


a new page with the 


ARLES Sear SS. ee fat 
Ae Se alae, : 
oar a e , eae sic large image... 
denene nyo CG . 
si Pe Ss 
aia a ae al a pm ely /) ft mp ak, / ad the. Me AD a ae x 
(a a Pel. ists ie el pc Denes oR nce ce See / Ad Mi hee te fae Ce Meee na 7 er * 
he Vides, ad a caged cee fer ee ay /oce poor Ded Le /aor irre lec ed Pe te iY 
plied a ee ee Ped en eee ps eee /) bet Pe > 
‘ Pre i : 
Seattle, Washingean Cliek x ‘, and displays it. 
‘ 
Me et oy Pt i ee de eck. ES * 
‘ 
\ 
Lali aha Sh tev the 
‘= Tt 
Birrremghers, England Downtown Seattle 


Hevea sew Bd phone wad Freeh Wy geil ee es ee be 
eae ore ep ee Cer amg te beet ed Bie og ieee be! 


The visitor ean click 
the back button 

to get back to the 
myPod page. 


To do this you need two things: 


A page to display each photo along with a 
heading that describes its content. 


(2) A link from each thumbnail in “index.html” 
to its corresponding photo page. 


Let’s create the pages first, and then we’ll come back and 
finish off the links. 
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Create individual pages for the photos 


First, create a new folder called “html” to hold these individual pages, just 
below the “mypod” folder: 


As you've probably 
guessed, we've alread 
rreated this folder tor 


in the book examples: 
Now we’re going to create one HTML file for each photo. If the photo is called ia 


“seattle_video_med.jpg”, then let’s call the HTML file “seattle_video_med.html” 
just to be consistent. In each HTML file, we’ll have a heading that describes 

the photo, followed by the photo. Here’s the HTML for the first Seattle photo. 
All the other pages will follow this same format: 


Title for the page. This Heed outves dy bake CSC 
<html> should describe the photo. again, just to keep the page 
<head> a Consistent color. 


<title>myPod: Seattle Ferry</title> 
<style type="text/css"> body { background-color: #eaf3da; } </style> 


</head> 

<body> xz Here we give the page a descriptive heading. 
<hl>Seattle Ferry</h1> 
<p> 

<img src="../photos/seattle_video med.jpg" alt="A video iPod on the ferry"> 

</p> 

</body> Here’s the <img> element that points to the large 

</html> “seattle video_med.jp9) photo. Let's also give the 


image a destviptive alt attribute. 


Notice that we need to use “..” in the relative path 
because the “html” folder is a sibling of the “photos” 


folder, so we have to o up one folder and then down 
into “photos” when using relative links. 
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If you look in the “html” folder in the chapter example files, you'll find all of the single photo 
pages already there, except one—the page for “seattle_downtown.jpg”. Create a page called 


“seattle_downtown.html” in the “html” folder, and test it out. Get this working before you move on. 
You'll find the answer in the back of the chapter if you have any problems. 


So, how do | make links out of images? 


You’ve got your large photos, your smaller thumbnails, and even a set of 
HTML pages for displaying individual photos. Now you need to put it all 
together and get those thumbnails in “index.htm!” linked to the pages in the 
“html” folder. But how? 


To link an image, you put the <img> element inside an <a> element, like this: 


The href is linked to the new 
And here's an <a> UTM Page for the photo, 
opening, tag just before seattle_downtownhtml” which 
Here’s the <img> element for Deane L ee ei 


‘ le downtown. | 4 
the “seat — + Lee <a href="html/seattle_downtown.html"> 


thumbnail, just as it 
“index htt’ file ot <img src="thumbnails/seattle_downtown. jpg" 


alt="An iPod in downtown Seattle, WA"> 


</a> 
Here's the ) The <ima> element is nested 
closing <a> tag. directly inside the <a> element. 


Once you've placed the <img> element into an <a> element, the 
browser treats the image as a clickable link. When you click the 
image, the browser will retrieve the page in the href. 
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Add the image links to “index.html” 


This is the last step. You just need to wrap <a> elements around each thumbnail’s <img> 
element in your “index.html” file. Remember, the href of each <a> element should link to 
the page containing the large version of the image in the “html” folder. Make sure that your 
links, thumbnails, and pages all match up correctly. 


Here’s the complete “index.html” file. All you need to do is add the HTML marked in gray. 


<html> 

<head> 
<title>myPod</title> 
<style type="text/css"> 

body { background-color: #eaf3da;} 

</style> 

</head> 

<body> 


<h1l>Welcome to myPod</h1> 
<p> 


Welcome to the place to show off your iPod, wherever you might be. 
Wanna join the fun? All you need is any iPod, from the early classic 
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest 
iPod Video, and a digital camera. Just take a snapshot of your iPod in 


your favorite location and we'll be glad to post it on myPod. So, what 
are you waiting for? 
</p> 


<h2>Seattle, Washington</h2> 
<p> 

Me and my iPod in Seattle! You can see the 

Space Needle. You can't see the 628 coffee shops. 
</p> 


<p> 
<a href="html/seattle video med.html"> 

<img src="thumbnails/seattle video med.jpg" alt="My video iPod in Seattle, WA"> 
</a> 
<a href="html/seattle classic. html"> 

<img src="thumbnails/seattle classic.jpg" alt="A classic iPod in Seattle, WA"> 
</a> 
<a href="html/seattle shuffle.html"> 

<img src="thumbnails/seattle_ shuffle.jpg" alt="A iPod Shuffle in Seattle, WA"> 
</a> 
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<a href="html/seattle_downtown.html1"> 


<img src="thumbnails/seattle downtown.jpg" alt="An iPod in downtown Seattle, WA"> 


</a> 
</p> 


<h2>Birmingham, 
<p> 


England</h2> 


Here are some iPod photos around Birmingham. We've obviously got some 


passionate folks over here who love their iPods. 


red British telephone box! 
</p> 


<p> 
<a href="html/britain.html"> 


Check out the classic 


<img src="thumbnails/britain.jpg" alt="An iPod in Birmingham at a telephone box"> 


</a> 
<a href="html/applestore.html"> 


<img src="thumbnails/applestore.jpg" alt="An iPod at the Birmingham Apple store"> 


</a> 

</p> 

</body> 
</html> 


Add these <a> elements to your “index.html” file. 
Save, load into your browser, and check out myPod! 


thereyareno 
b Questions 


pum 


Q: When we put an <a> element around text, we get an 
underline. Why don’t we get something equivalent with images? 


A: Actually, Internet Explorer puts a border around an image 

to show it is linked. (Our browser, Safari, doesn’t do that.) If your 
browser puts a border around or a line under your linked images, and 
you don't like it, hold on a few more chapters and you'll learn how to 
change that with CSS. Also notice that when you pass your mouse 
over an image, your cursor will change to indicate you can click on 
the linked image. In most cases your users will know an image is 
linked by context and by the mouse cursor, even if there’s no border. 
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For each thumbnail image, wrap an <a> element around it. 
Just be careful to get the right href in each link! 


eas 


8 Can’t we just link to the JPEG image directly without all 
those HTML pages? | thought the browser was smart enough to 
display images by themselves. 


A: You're right; you could link directly to the image, like this: <a 
href="photos/seattle_downtown.jpg”> ... </a>. If you did that and 
clicked on the link, the browser would display the image by itself 
on a blank page. In general, though, linking directly to an image is 
considered bad form, because you usually want to provide some 
context for the images you are displaying. 


www.it-ebooks.info 


adding images to your pages 


The myPod web page 
is looking awesome! I think 
you should add a logo to the 
page—that would add a great 
finishing touch. 


Great idea. In fact, we’ve got a myPod 
logo all ready to go. 


Take another look in the folder 
“chapter5/mypod”, and you'll find a 
folder called “logo”. In that folder you'll 
find a file called “mypod.psd”. ‘The 
“psd” means that the file has been saved 
in the Photoshop format, a common 
format for image editing software. But 
Photoshop format files are meant for 
processing digital images, not for web 
pages, so we'll have to do some work to 
get a “web ready” image from it. 


Many photo editing applieati 

Ky understand -psd ial ri 
if you don’t have Photoshop 
Elements, follow along fo, 
the next few Pages. [f your 
application tant open the “psd” 
File, you'll find the images from 
each step in the “logo” folder. 
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Open the myPod logo 


Let’s check out the myPod logo: open up the file “mypod.psd” 
in the “chapter5/mypod/logo” folder in Photoshop Elements: 


You'll find the “logo” folder in 
the “ehapterS/mypod” folder. 


BAA Pile Brower 
File Rat due Beet. eee fe] [ee] St Bs 
at | me ian WY Fre | Repoeeard uni: 


If your photo editing, 
application wont open 
the file, follow alono, 
anyway—the same 
principles apply for 
other formats as well. 


A. closer look... 


Nice logo; it’s got some typography combined with two circles, 
one gray and one white (obviously inspired by the click-wheel 
controls on the classic iPod). 


But what is that checkered pattern in the background? That’s 
the way most photo editing applications show you areas that 
are transparent. Keep all that in mind as we choose a graphic 
format for the logo... 


Whenever You see this 
checkered pattern, 
that indicates a 


transparent area in 
my a 
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What format should we use? 


You already know that we have a couple of options in deciding how to save this 
image: we could use JPEG, PNG, or GIF. This logo uses only three colors, text, 
and some geometric shapes. From what you’ve learned about the two formats, 
youre probably leaning toward PNG or GIF. Either would be fine; the PNG 
might be a slightly smaller file at the same quality, so we’ll go with PNG. And, 
because we only have three colors, we'll be safe using PNG-8 which allows only 
256 colors, so using this format will reduce the file size even more. 


So, go ahead and choose the “Save for Web” option under the File menu, and 
then choose PNG-8 in the format drop-down. You'll see we have a few more 
options. Let’s take a look... 


Remember, use this pull-down 


Hi to set the format. 
Cre going to set the Here’s where Photosho 
P 
ormat: to PNG-@ to save Elements shows you the 
the logo. 


number of Colors being 
used to save the PNG. 
It’s alveady set to the 
| or maximum the PNG-8, 
25b. We'll leave it there. 


When you set the 
format to PNG, this 
Transparency checkbox 
appears. By default, 
it’s checked. Do we 
want a transparent 
backoround? 


Also note the 
Matte option. 
This is related to 
transparency, as 
you'll see in a see. 


|= pe 
oan | 


a 


Try unchecking the Transparency checkbox: 
you'll see the PNG preview at the bottom 
change to a white background. 
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To be transparent, or not to be transparent? 
That is the question... 


The myPod logo is going to be placed on a light green 
background, so you might think that transparency is going 
to be a good thing, right? Well, let’s compare how the logo 
looks using a few options in the “Save for Web” dialog: 
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Here's the logo saved in three different ways and 
displayed on a web page with a green background. ‘| 


Chapter 5 


Ah, now we're talking; this looks great. For this 
version, we told Photoshop Elements to create the 


matte around the text using a green background. 
How? We'll show you next. 
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things 
out transparency) . 
a ret bad. Clearly, 9 white 
background isnt geing : ei 
on a green web Page [£ might, 


however, work jst fine on a 
white web page): 


Here’s what we get if we check 
Transparency and save. Better... 
but what’s that white “halo” 

around the letters in the logo? 


The halos happen because the 
photo editing application creates 
a “matte” to soften the text’s 
edges against the background 
tolor. When it did that for this 
logo, however, it assumed it was 
softening the edges against a 
white backround. 
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Save the transparent PNG 


You know you want a transparent PNG version of the logo, 
and you also know we'll need to use a matte to prevent the 
halos around the text. Let’s check out the PNG panel of the 
“Save for Web” dialog. 


You know to 
choose PNG-8 
already. hoe Lome 
oa ee 
ener. [700 
And check Gal Tureparecey ta L-—~ Now we need to take a look at 
Transparency. the Matte option. 
The Matte option allows you to select the color for the matte 
around the text. And we want that to be the color of the web 
page background. The Matte option 
supplies the color for 
— softening the edges of 
ee 2 the text. Since the web 
te Fo fenpen ieee een inert ee page is a light green, we 
: : want to use the same 
color for the matte. 


Choose “Other...” since 
our Color isn’t listed. 


ae 
Sine. 


Ee EE wily pe ere) 
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Wait, what is the color of the web page background? 


Remember that Reapy Bake C$§ in the myPod “index.html” file? 
That CSS is what sets the background color of the page to light 
green. And that’s where we can get the color: 


<style type="text/css"> Here's the background 


body { background-color: } color right here. 


</style> 


< What? You can't tell that’s light 
green? For now, take our word for 
it; we'll come back to this in a few 
chapters and explain all about colors. 


Set the matte color 


When you click on the Matte pull-down menu and choose the “Other...” menu 
option, Photoshop Elements will bring up the Color Picker dialog. 


pe \ The Color Picker gives you a lot 
af different ways to choose the 


matte color. We just want to 
set it to the background color 
of the web page, and we already 
know that is eafSda... 


| Choose a cole: 


® Lean mcce abou 


Chnhy Wet Goboey 


which is going to 90 right here. 
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Set the matte color, continued 


Go ahead and enter the color, “eaf3da”, into the “Color Picker” dialog box. 
You'll see the color change to the background color of the myPod page. 


Choecia aceon 


3 Lear meer eed: 


Type these letters in right here. 
This box is designed specifically for 
tolors written in the web format. 
You can type the letters in upper— 


or lowercase; it doesn't matter. 


Oey Wea Colors 


Onte you've typed the color 
into the Color Picker, click 
OK and it will apply the 
change to the logo. 


Check out the logo with a matte 


Now take a close look at the logo again in the preview pane. You'll see Photoshop 
Elements has added a light green matte around the hard edges, which will give the 
myPod logo text a softer, more polished look when the logo is in the web page. 


—~ 


Now, when you look close up at the 
logo, you'll see the matte matches the 
green tolor in the background of the 
myPod web page. 
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Save the logo 


Okay you’ve made all the adjustments you need to in the “Save for Web” 
dialog, so go ahead and click OK to save the image as “mypod.png”. 


fae As: Lome fireg —_, | Elements will automatically 


_J 

thanoe the extension or Your 
Where: | (0) loge =| Plesaee to “png.” Save the 
image as “mypod.pn9) in the 


(aac!) Ga) “logo” folder. 


Add the logo to the myPod web page 


Now all you need to do is add the logo to the myPod web page. 
We'll add it to the top so it appears above the website description 
and iPod images. ‘That way, it’s the first thing your visitors see 
when they come to your myPod page. 


<html> 
<head> 
<title>myPod</title> 
<style type="text/css"> 


body { background-color: #eaf3da;} Add the logo image at the top of the 
</style> myPod web page. Remember to use the 
</head> correct relative path for the logo, 
<body> in the “logo” folder, and add an alt 


ae attribute that destribes the image. 


<img src="logo/mypod.png" alt="myPod Logo"> : ) 
</p> 


<hl>Welcome to myPod</h1> 


in Rest of “index.html” HTML here... 


</body> 
</html> 
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And now for the final test drive s= 


Let’s test this puppy! Reload the web page in the browser 
and see how your myPod transparent PNG logo works. 


Welcome to myPod 


Withee fa et pale 20 ee OE er DP eee pe eg be. Wee pode ie Fs All ec 

Cae) te aay EP, free ca marly edie iPod oc hen lena Ped Hoare, che creed Peed Shera to cha 
Lageer Pd Vietied. ad a digdodd cheer Seer ee 2 peed ot poor GPa be poe Piette leet 
md we'll be gad bo ped tt reid Si, wel oe ye evaing for? 


Searte, Washington 


Afi iow ery CP vn ce Beatie? Yon one eects Space Monde. View cael dos the BE cadfioe shop. 


Excellent work. 
The logo looks great. 
You've got a kick-ass 
myPod website here! 


Bere wre wenc iP peoon areeed Eoreingdein. We'er obvieihy get some pence felis reer ere: 
whe bee tage (Prods. Check our feo gear red Pct belephane bog! 
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thereyareno 
b Questions 


pum 


Q: Do | really need to know all this stuff about image formats 
to write good web pages? 


A: No. You can build great web pages without any images. 
However, images are a big part of the Web, so some knowledge of 
how images work can really help. Sometimes just an image or two 
makes the difference between a good page and a great one. There’s 
a lot to know about images, but it’s easy to learn as you go. 


Q: Why does the text need its edges softened? 


A: Check out the two versions of the myPod logo below: 


You'll see the top version has very hard, jagged edges and is less 
readable. This is the way text is displayed by default on a computer 
screen. The second version has had its edges softened using a 
technique called anti-aliasing. Words that are anti-aliased on a 
computer screen are more readable and more pleasant to the eye. 


Q: So where does the matte come in? 


A: The process of anti-aliasing softens the edges relative to the 
background color. If you put the bottom version of the logo (from the 
previous Q&A) against a colored background, you'd see it has white 
edges in it. The Matte option in Photoshop Elements allows you to 
specify the color of the background that the text will be placed on, so 
when the text is softened it is done so against that color. 


Q: Does this technique just work for text? 


+ No, it works for any lines in your graphics that might result in 
“jaggies.” Check out the circle in the myPod logo; it was matted too. 


210 


Q: Why can’t | just make the logo background color solid and 
match the color to the web page? 


A: You could do that too, but there is one disadvantage: if there 
are other things in your web page that are showing through the 
transparency, then they won't be seen with the solid color version. 
You haven't seen any examples of this yet, but when we get into CSS, 
you will. 


Q: What if | change my background color after | make the 
matted version? 


A: Aslight variation in your background color probably wouldn't be 
noticeable; however, if you change the color dramatically, you'll have 
to recreate the PNG with a new matte color. 


If you're placing a 
transparent image in 
your web page, make 
sure the matte color of 
the image matches the 
background color of your 
web page. 


You can use PNG or 
GIF format for your 


transparent image. 
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ae POINTS 


Use the <img> element to place images in your 
web page. 


= Browsers treat <img> elements a little differently 
than other HTML elements; after reading the 
HTML page, the browser retrieves each image 
from the web server and displays it. 


= If you have more than a couple of large images 
on a web page, you can make your web page 
more usable and faster to download by creating 
thumbnails—small images that the user can click 
on to see the large version of the image. 


= ~=The <img> element is an inline element, which 
means that the browser doesn't put a linebreak 
before or after an image. 


= ©The src attribute is how you specify the location 
of the image file. You can include images from 
your own site using a relative path in the src 


= The alt attribute of an <img> element is a 
meaningful description of the image. It is 
displayed in some browsers if the image can't 
be located, and is used by screen readers to 
describe the image for the visually impaired. 


= Awidth of less than 800 pixels is a good rule 
of thumb for the size of photo images in a web 
page. Most photo images that are created by 
digital cameras are too large for web pages, so 
you'll need to resize them. 


= Photoshop Elements is one of many photo 
editing applications you can use to resize your 
images. You can also use one of many free 
online tools to resize images. Just search for 
“free online image editor.” 


= Images that are too large for the browser make 
web pages difficult to use and slow to download 
and display. 


attribute, or images from other sites using a URL. 


JPEG, PNG, and GIF are the three formats 
for images that are widely supported by web 
browsers. 


The JPEG format is best for photographs and 
other complex images. 


The GIF or PNG format is best for logos and 
other simple graphics with solid colors, lines, or 
text. 


JPEG images can be compressed at a variety 
of different qualities, so you can choose the best 
balance of quality and file size for your needs. 


The GIF and PNG image formats allow you to 
make an image with a transparent background. If 
you put an image with a transparent background 
in a web page, what's behind the image, such 

as the background color of the page, will show 
through the transparent parts of the image. 


GIF and PNG are lossless formats, which means 
the file sizes are likely to be larger than JPEG. 


PNG has better transparency control than GIF, 
and allows many more colors than GIF, which is 
limited to 256. 


PNG has three different size options: PNG-24 
(supports millions of colors), PNG-16 (supports 
thousands of colors), and PNG-8 (supports 256 
colors), depending on your needs. 


In Photoshop Elements, use the Matte color 
menu in the “Save for Web” dialog to choose 
the right color for softening the edges of your 
transparent PNG or GIF image. 


Images can be used as links to other web pages. 
To create a link from an image, use the <img> 
element as the content of an <a> element, 

and put the link in the href attribute of the <a> 
element. 
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more left brain 


HTMLceross 


It’s time to give your right brain another break and put that left brain 
to work. All these words are HTML-related and from this chapter. 


3 4 

5 6 

7 
8 
9 10 
11 12 
13 

14 
Across Down 
1. With JPEG, you can control this. 2. The alt attribute improves this. 
3. Most web browsers retrieve images this way. 4. Small images on a page. 
5. PNG and GIF have it, JPEG doesn’t. 6. Technique for softening edges of text. 
8. Miles you can draw with a pencil. 7. The larger the image, the it takes to 
10. Web server makes a request for each one of transfer it. 
these. 9. Better for photos with continuous tones. 


11. Smallest element on a screen. 

12. You used Photoshop Elements to do this to 
images. 

13. Lovable MP3 player. 

14. Better for solid colors, lines, and small text. 
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* 
* ~ > , 4 y = 
WHICH IMAGE FQRMAT? 
a $e0ov_L.uTiow 


Congratulations: you've been elected “Grand Image Format Chooser” of the day. For 
each image below, choose the format that would best represent it for the Web. 


JPEG or PNG or GIF 


A photo with lots of continuous 
shades of gray. i UJ UL 


Only a couple of colors with some 
text; definitely a PNG or GIF. [ | ui ui 


No aa PNG might 
yield a smaller tile. 


A photo with lots of colors; 4 


definitely a JPEG or PNG; 
and if you want a transparent 
background, 90 with PNG. 


Just a simple black and white 
icon; a PNG or GIF. If you need fi 
ph transparency, you might want 

The anti-aliasing on the edges, and PNG 


would be better for that. 


This image is borderline. |t has 
lots of continuous colors (JPEG), Th mt 
but is also slightly geometrie 


> (GIF) and You may want to 
use this in a way that requires 
transparency (PN4). 


| 
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Here's a “Sharpen your pencil” that is actually about pencils (oh, and images too). 
This exercise involves a bit of trivia: Given a typical, brand-new pencil, if you drew 
one continuous line with it, using the entire pencil up, how long would the line be? 


What's that got to do with images? To find the answer, you had to write some 
HTML. The answer to this trivia is contained in the image that is at the URL: http:// 
wickedlysmart.com/hfhtmlcss/trivia/pencil.png. Your job was to add an image to 
this HTML and retrieve the answer. Here’s our solution. 


<html> 

<head> 
<title>Sharpen your pencil trivia</title> 

</head> 

<body> 
<p>How long a line can you draw with the typical pencil?</p> 
<p> 

<img src="http://www.headfirstlabs.com/trivia/pencil.gif"> 

</p> 

</body> 


</html> If you put the image here, you Can see 


the answer when you load the page: 


aa ey Saarpan pour goed ea 


a 


a PG oo oe Ae hepa ia. bord 


Hoe long 0 line can yor dere verb the sepicel pemcil! 


The typical new pencil can 
ee 98 eee beg 


Source: http://www.papermate.com 
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Here are the results of having a broken image in a few different browsers. In most cases, the 
browser is able to use the extra alt attribute information to improve what is displayed. Why do 


Exe ise we care? After all, this is an error in a web page; we should just fix it, right? Well, in the real 
Lution world, things are often not ideal; sometimes things break, Internet connections go bad in the 


middle of a page load, or visually impaired users need to hear what is in the image, because 
they can’t see it. 


er 

es pfs eacmmrarean —_ a a 

6 Seo er perlene . ee Pe ee | a 

| ew dong a ine cum prod ourhothe repicel peel? 

Hew Long alse can poe drew with the cypical peecilT 
a) el are DG crates cain 


® 
IE displays the alt | 

\ ite text along with The Chrome browser displays a broken 
the broken image icon. image i¢on, but doesn't display the 


text in the alt attribute. 


— Sarpen a cell iva. 


erro! | rhapiers erie beret 


Hire dong a oe ca yoo dear with Dee fpsicad pencil! 


| rT 
Safari on the oe) 
doesn't make good use 
of the alt attribute 
from broken images. 
1. Suspense parca aia 
a ee " i 
| om Lol teiiihaitiaibaren a) L Booey lore 2 Tiree cain po ira et thee typical pencil 
irae fey ob Llinet estn sra.o haces ah et: ppc pied? Pencil ne 35 miles long 
fos eT | \ 
~ Firefox on the Mae 
Opera on the Mace just displays the text 
displays the alt in the alt attribute. 
attribute text. 


Ra! —_= SS 888888888555... _—_ 
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* '® ) K 


4 2 
WI FIC HI IMAGE FQR RAT? 
© SsevruoTiewn 


Your task this time: open the file “chapter5/testimage/eye.jpg” in Photoshop Elements. Open the “Save for Web” 
dialog and fill in the blanks below by choosing each quality setting for JPEG (Low, Medium, High, etc.), and also try 
PNG-24 and GIF. You'll find this information in the preview pane below the image. Once you've finished, determine 


which setting makes the most sense for this image. Note that your numbers ma differ devend 
m may ditrer depending 


on the version of software you are using. 


Format Quality Size Time Winner 


13 seconds [ | 


y - Maximum 8 seconds [|_| 


Did you notice 

how the 

image quality ' 

ang =" Gk Sseeonds, 
PEG Maximum 
to Low? 


Medium Z seconds [/] 


Isecond = [_] 


i.e N/A 22K 9 seconds, [_] 


Is the winner veally Medium? Not netessarily. |¢ all depends on what your needs ave. [f you want a 
really high-quality image, then you might want Very High. [f you want the fastest possible site, then 
try Low. We've chosen Medium because it is a nice tradeoff in size versus the quality of the image. 
You may think Low is g00d enough, or that it’s worth bumping the quality up to High. So, it’s all 
very subjective. One thing is for sure, however: PNG and 4IF don’t work very well tor this image 
(which should not be a surprise). 
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If you look in the “html” folder with the chapter examples, you'll find all of the single photo pages 
already there, except one: the page for “seattle_downtown.jpg”. Create a page called “seattle_ 
’ ise downtown.html’ in the “html” folder, and test it out. Get this working before you move on. 
Lution Here’s the answer: 


Here's the HTML; this file should 
be called “seattle downtown: html 


<html> ) 


<head> 
<title>myPod: Seattle Downtown</title> 
<style type="text/css"> body { background-color: #eaf3da; } </style> 
</head> 
<body> 
<h1>Downtown Seattle</hl1> 
<p> 
<img src="../photos/seattle downtown.jpg" alt="An iPod in downtown Seattle, WA"> 
</p> 
</body> 
</html> 


This file should 90 in the 
html” folder under “mypod”. 


Here's the test drive. 


you are here > 217 


www.it-ebooks.info 


exercise 


"CIO|IN| C|/UJRIRIEIN|TILIY 


E H 
"TIR|AIN|S/P/AIRIEINIClY U 
S N M ge 
"TIH|IJRIT/Y|FIIIVIE B O 
B I N N 
“J ‘IMAGE A G 
oa ca L REVS 212) € 
E I ‘I;P|O}D L R 
‘6 I F Bi A a 
y S 
saree pencil 
Solution Here's how you add the image “seattle.jpg” to the file “index.html”. 


<h2>Seattle, Washington</h2> 

<p> 
Me and my iPod in Seattle! You can see rain clouds and the 
Space Needle. You can't see the 628 coffee shops. 

</p> 

<p> 


<img src="photos/seattle.jpg" alt="My iPod in Seattle, WA"> 
</p> 
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* Getting Serious with HTML 
* Py 


What else is there to know about HTML? You’re well on your way to 
mastering HTML. In fact, isn’t it about time we move on to CSS and learn how to 
make all this bland markup look fabulous? Before we do, we need to make sure your 
HTML is really ready for the big leagues. Don’t get us wrong, you’ve been writing first- 
class HTML all along, but there are just a few extra things you need to do to make it 
“industry standard” HTML. It’s also time you think about making sure you’re using the 
latest and greatest HTML standard, otherwise known as HTML5. By doing so, you'll 
ensure they'll display more uniformly across all browsers (at least the ones you’d care 
about), not to mention, they'll play well with the latest i-Devices (pick your favorite). 
You'll also have pages that load faster, pages that are guaranteed to play well with 
CSS, and pages that are ready to move into the future as the standards grow. Get 
ready, this is the chapter where you move from web tinkerer to web professional. 
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writing standard html 


Hey guys, the 
boss just sent an email. 
Before we add CSS to the Head 
First Lounge, he wants us to make sure 
our HTML is ready for prime time. 
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Jim: Ready for prime time? 
Frank: Yeah, you know, make sure it’s totally legit and 
ready for HTMLS. 


Jim: Our HTML is just fine...here, look at it in the 
browser. It looks beautiful. 


Joe: Yeah, that’s what I think... he’s just trying to give us 
another thing to do. 


Frank: Actually guys, I hate to admit it, but I think the 
boss is right on this one. 


Jim, Joe: Huh? 


Frank: Up until now we’ve pretty much ignored the fact 
that there are standards for this stuff. Not to mention there 
are different versions of HTML, like HTML 4.01, and 
now, HTML5. Are we doing everything we need to make 
sure we ve got HTML5 covered? 


Joe: Come on, this is just gong to mean even more work. 
We've already got enough to do. Really, the page looks fine; 
I’ve even tested it on some of the newer devices. 


Frank: That may be, but what I’m saying is that I think 
this will help us do less work in the future. 


Joe: Oh yeah? How so? 
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standards 


Frank: Well, if we make sure our HTML 1s up-to-date with current 
standards, we won’t have to make as many changes down the road. We 
should also make sure everything else 1s correct; you know, our syntax 

and all that. There are so many different browsers and versions of those 
browsers that if we’re making mistakes in our HTML, then all bets are off 
in terms of how our pages will look in different browsers. And when we 
start adding presentation to HTML with CSS, the differences will get even 
more dramatic if our HTML isn’t up to snuff. 


Joe: So, by making sure we’re adhering to the “standard,” we’ll have a lot 
fewer problems with our pages displaying incorrectly for our customers? 


Frank: Right. 


Jim: If it reduces the number of 3 a.m. calls I get, then that sounds like a 
good idea to me. 


Joe: All right, how do we start? Don’t we adhere to the standards now? 
What’s wrong with our HTML? 


Frank: Maybe nothing, but the boss wants to be current with HTML5, 
so we need to figure out which version of HTML we’re using and if it’s 
not HTMLS5, what we need to do to get there. And, when we’re done, life 
should be much easier when we start using CSS. 


iE RAIN 
IPQWER 


Browsers all do a pretty good job of consistently displaying 
your pages when you write correct HTML, but when you make 
mistakes or do nonstandard things in your HTML, pages are 


often displayed differently from one browser to another. Why 
do you think that is the case? 
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html timeline 


A Brief History of HTML 


HTML 1.0-2.0 


These were the early days; you 


could fit everything there was 
to know about HTML into 
the back of your car. Pages 
weren't pretty, but at least 
they were hypertext enabled. 
No one cared much about 
presentation, and just about 
everyone on the Web had 
their very own “home page.” 
Even a count of the number 
of pencils, paperclips, and 
Post-it notes on your desk 
was considered “web content” 
back then (you think we’re 
kidding). 


1989 1991 
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HTML 3 


The long, cold days of the 
“Browser Wars.” Netscape 
and Microsoft were duking it 
out for control of the world. 
After all, he who controls the 
browser controls the universe, 
right? 


At the center of the fallout 
was the web developer. 
During the wars, an arms 
race emerged as each browser 
company kept adding their 
own proprietary extensions 

in order to stay ahead. Who 
could keep up? And not 

only that, back in those days, 
you had to often write two 
separate web pages: one for 
the Netscape browser and 
one for Internet Explorer. Not 
good. 


1995 
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Abhh...the end of the Browser 
Wars and, to our rescue, the 
World Wide Web Consortium 
(nickname: W3C). Their plan: 
to bring order to the universe 
by creating the ONE HTML 
“standard” to rule them all. 


The key to their plan? 
Separate HTML’s structure 
and presentation into two 
languages—a language for 
structure (HTML) and a 
language for presentation 
(CSS)—and convince the 
browser makers it was in their 
best interest to adopt these 
standards. 


But did their plan work? 


Uh, almost...with a few 
changes (see HTML 4.01). 


1998 


Starting with this chapter, our goal is to write 
world keeps moving, so we'll also talk about 


HTML 4.01 


The good life: HTML 4.01 
entered the scene in 1999, and 
was the “must have” version of 
HTML for the next decade. 


4.01 wasn’t really a big change 
from 4.0; just a few fixes were 
needed here and there. But 
compared to the early days of 
HTML (when we all had to walk 
barefoot in six feet of snow, uphill 
both ways), HTML 4.01 allowed 
us all to sleep well at night 
knowing that almost all browsers 
(at least the ones anyone would 
care about) were going to display 
our content just fine. 


XHTML 1.0 


Just as we were all getting comfortable, 


a shiny object distracted everyone. 
That shiny object was XML. In fact, it 
really distracted HTML, and the two 
got hitched in a shotgun marriage that 
resulted in XHTML 1.0. 


XHTML promised to end all the 
woes of the Web with its adherence to 


strictness and new way of doing things. 


The only problem rah eagle ended 
up hating XHTML. They didn’t want 
a new way to write web pages, they 
just wanted to improve what they 
already had with HTML 4.01. Web 
developers were far more interested 
in HTML flexibility than XHTML’s 
strictness. And, more and more, these 
developers wanted to spend their time 
creating web pages that felt more like 


applications than documents (more on 
web apps later)... 


2009 


Standards and all that jazz 


Proper HTMLS. As always, the 
where things are going. 


HTMLS 


Of course, with no support from the 


community, the marriage didn’t end 
well and was replaced by new version 
of HTML named HTMLS. With its 
support for most of the HTML 4.01 
standard, and new features that reflect 
the way the Web has grown, HTML5 
is what developers were looking for. 
And, with features like support for 
blog-like elements, new video and 
graphic capabilities, and a whole new 
set of capabilties aimed at building 
web applications, HTML5 was 
destined to become the standard. 


‘To be honest, the divorce of HTML 
and XML took a lot of people by 
surprise, leading to confusion about 
what HTMLS5 actually zs for a while. 
But that’s all been sorted out, so read 
on to find out what HTML5 means to 
you, and how you can join in the fun. 


2012 


And what will happen in the future? Will we all 
be going to work in flying cars and swallowing 


nutrition pills for dinner? Keep reading to find out. 
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browsers and html versions 


Head First: We’re glad to have you here, Browser. As 
you know, “HTML versions” have become a popular 
issue. What’s the deal with that? You’re a web browser, 
after all. I give you HTML and you display it the best 


you can. 


Browser: Being a browser is tough...there are a lot 
of web pages out there, and many are written with old 
versions of HTML or with mistakes in their markup. 
Like you said, my job 1s to try to display every single 
one of those pages, no matter what. 


Head First: So what’s the big deal? You seem to be 
doing a pretty good job of it. 


Browser: In some cases, sure, but have you ever 
looked at your pages on a lot of different browsers? 
When you are using old or incorrect markup, your page 
may look great on one browser, but not so great on 
another. 


Head First: Really? Why is that? Don’t you all do the 
same thing? 


Browser: We do a great job of doing the same thing, 
when we're displaying correct and up-to-date pages. Like I 

said, when you venture into pages that aren’t written 
well, then things get a lot dicier. Here’s why: all of us 
browsers have the HTML specification to tell us how to 
display correct HTML, but when it comes to incorrect 
HTML, we just wing it. So, you might get very different 
behaviors on different browsers. 


Head First: Ahh. So, what’s the solution to this mess? 
We definitely want our pages to look good. 


Browser: Easy. Tell me up front which version of 
HTML you're using. You’d be surprised how many 
pages don’t even do that. And make sure your page 
doesn’t contain any errors; you know, mismatched 
markup tags, that kind of thing. 
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The Browser Exposed 
This week’s interview: 


Why do you care so much about 
which HTML version I'm using? 


Head First: How do we tell you which version we’re 
using? Especially now that we’re all moving on to 
HTML5. 


Browser: Well, HTML5 is actually making things a 
little simpler. 


Head First: Really? How is a new version of HTML 
helping? I would have thought yet another version 
would just make things even more difficult. 


Browser: It’s true that any new version of a language 
causes growing pains as everyone tries to catch up with 
the latest standard. But HTMLS simplifies the way you 
tell me the kind of HTML you're using. The HTML5 
standard is also documenting many of the errors that 
can occur in web pages, so that all the browsers can be 
more consistent about how they handle those errors. 


Head First: Oh, so does that mean we don’t have 
to worry about making errors when we’re writing our 


HTML? 


Browser: No! Just because we can handle errors 
better doesn’t mean you can be sloppy. You still want 
your page to be consistent with the standard and 
written without errors. If you don’t, you might get 
inconsistent results across browsers, and let’s not forget 
the browsers on mobile devices, too. 


Head First: Back to how we tell you what version 
we're using? 


Browser: Yeah, that used to be a total pain in the... 


Head First: Uh, watch it, this is a PG-rated audience, 
and we’re running out of time, quickly! 


Browser: Okay, you can tell me all about the version 
of HTML you're using with a doctype. It’s a little bit 
of “markup” you can use that goes at the very top of 
your HTML file. So, given we’re out of time, go check 
it out! 


www.it-ebooks.info 


HTML 
Archaeology 


We did some digging and found some old HTML 4.01 and XHTML 1.1 
pages. These pages use a doctype, at the very top of the HTML file, to tell 
the browser which version of HTML they’re using. We've snipped out a 
couple of doctypes for you to look at. Check them out below... 


‘ This just This part says we're 
This means 8) 
<< ig specixyind, baal means the using HTML version 
eae ie ara HTML 4.0l 4.0] and that HTML 
Lor this page to ( Liest) element standard markup is written in 
the browser: in Your Page: is publicly English. 
available. 


rf 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/htm14/strict.dtd"> 


this is NOT an HTML 
«Patter the a 
which tells you 
different. 


Notiee that 
element. It has a 
at the beginning, 
this is something, 


This points toa file 
that identifies this 
particular standard. 


It’s still a version of 
HTML—an XML version. 


A 


Just like the HTML DOCTYPE, 
this is a publi¢ document type: 


standards and all that jazz 


You can type this all 
on one line, or i you 
want, You can add a 
return where we did. 
Just make sure You 
only press Return in 
between the parts in 
the quotes. 


J 


It's for the XHTML I.I 


version of XHTML. 
<!DOCTYPE html LO 
PUBLIC "-//W3C//DTD XHTML 1.1//EN" 


"http: //www.w3.org/TR/xhtml111/DTD/xhtm111.dtd"> 


And it has a URL pointing to the 


For more on XHTML, check out the appendix. 
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guess the doctype« 


your pencil 


Rather than tell you the doctype definition for HTML5, we thought you might want 
to have fun working it out on your own. Take another look at the HTML 4.01 doctype 


definition below: 


awe! this is the And this means This part says we're using, HTML 
doetype tor 


“html this standard is version 4.0] and that this 


‘% publicly available. markup is written in ENolish. 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"> 


This points to a File that 
identifies this standard. 


Remember, the doctype definition belongs at the top of your HTML file and tells the browser 
the type of your document—in this case, HTML 4.01. By using a doctype, the browser is able 
to be more precise in the way it interprets and renders your pages. 


So, using your deductive powers, what do you think the doctype definition for HTML5 looks 
like? Write it here (you can refer back to your answer when we cover this on the next page, 
and no peeking at the answer!): 
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The new, and improved, HTML doctype 


Okay, get ready for it. Here’s the HTML5 doctype: 


<!doctype html> ) 
F— |t’s just one line; don’t miss it. 


And it’s really simple! 


How close was your answer in the Sharpen Your Pencil? This is much simpler, Our sympathies 

wouldn’t you say? And, wow, you might even be able to remember it without to those who had 

having to look it up everytime you need a doctype. the old doetype 
tattooed on 
their palms to 


remember it. 


Wait, isn't this supposed to tell 
the browser the version? Where's the 
version number? Is that a typo? 


Good point. No, it’s not a typo, and let’s step through why: you 
know the doctype used to be a complicated mess full of version 
numbers and ugly syntax. But with the arrival of HTMLS, the 
doctype was simplified so that now all we have to do is tell the 
browser we’re using “html”; no more worrying about specific 
version numbers or languages or pointing to a standard. 


How can that be? How can we just specify “html” without the rest? 
Doesn’t the browser need that other information? Well, as it turns 
out, when the browser sees: 


<!doctype html> 


it assumes youre using standard HTML. No more getting all hung 
up on version numbers or where the standard is located; in fact, the 
HTML standard has become a “living standard,” meaning that 

it will continue to grow and morph as needed, but without fixed 
version numbers. Now, you’re probably thinking, “What exactly 
does a lwing standard mean? How is that going to work?” You'll see, 
on the next page... 
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html is backwards compatible 


HTML, the new “living standard” 


You heard us right...rather than continue to crank out version 6, 7, 8 of HTML, the 
standards guys (and gals) have turned the specification into a living standard that will 


document the technology as it evolves. So, no more version numbers. And you can stop calling 
it HT'ML5 because it’s just “HTML?” from here on out. 


Now, you’re probably wondering how this is going to work in practice. After all, if the spec 1s 


continually changing, what does that mean for the poor browsers? Not to mention, for you, 
the web developer? One key to this working 1s backwards compatibility. Backwards compatibility 
means that we can keep adding new stuff to HTML, and the browsers will (eventually) 
support this new stuff, but they'll also keep supporting the old stuff. So the HTML pages 
you're writing today will keep working, even after new features have been added later. 


Works on: 

Lae sa those...plus 
) Five on new versions 

10, Safari 5, of each 


Opera II 


Lo. Works on all — those...plus 


Works on all 


new versions 


of each | 


f 


Notice each new version is getting a little bigger because 
new stuff is being added, but the old stuff still works! 


Q: So what happens if the spec 
changes tomorrow? What do | do? 


A: If you're writing solid HTML today and 
the spec changes tomorrow to incorporate 
a new element, then you can just keep 

on doing what you're doing. It’s up to you 
whether you want to use that new element 
or not. 
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Dumb Questions 


If the spec changes something you're 
already doing, like the way an element or 
attribute works, then browsers are supposed 
to continue to support the old way you're 
using it as well as the new way. That’s what 
“backwards compatibility” means. Now, it is 
obviously a good thing if existing features 
are changed as little as possible, and if you, 
as a web developer, keep up-to-date on the 
spec and change your pages as the spec 
changes, but the idea is that your HTML will 
continue to work as the spec changes. 
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Your HTML from today still 
works because the old stuff is 
still supported. 


Works on all those... 
a plus faney new 


browsers we haven + 


Ga thought of yet! 


OF What exactly is a spec, anyway? 


A: The specification is the document that 
specifies what the HTML standard is; that is, 
what elements and attributes are in HTML, 
and more. This document is maintained by 
the World Wide Web Consortium (W3C, for 
short), but anyone can contribute to it and 
have a say in how the standard is developed. 


standards and al! tha 


Okay, I think we've 
got it now. Let's get that 
doctype in the lounge files and 

update these pages to HTML5. 


Here’s the doetype line. Just 
add it as the very fivst thing 
in the “lounge-html” file. 


You an write DOCTYPE 
ee or dottype. Both work. 

<!doctype html> 
<html> 

<head> 

<title>Head First Lounge</title> 
</head> 
<body> 


<hl>Welcome to the New and Improved Head First Lounge</h1> 
<img src="drinks.gif"> 
<p> 
Join us any evening for refreshing 
<a href="elixir.html">clixirs</a>, conversation and 
maybe a game or two of <em>Dance Dance Revolution</em>. 
Wireless access is always provided; BYOWS (Bring 
your own web server). 
</p> 
<h2>Directions</h2> 
<p> 
You'll find us right in the center of downtown 
Webville. If you need help finding us, check out our 
<a href="directions .html">detailed directions</a>. 
Come join us! 
</p> 
</body> 
</html> 
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Adding the document type definition 


Enough talk, let’s get that doctype in the HTML. 
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testing with a doctype 


The doctype test drive 


Make the changes to your “lounge.html” file in the 
“chapter6/lounge” folder and then load the page in your browser. 


heck) — Head First Lounge 


eae | . st — 
: a ERE ESRC IE 
; = | pty He: Cf fehapterd {lousage fou raya. hari 


Welcome to the New and 
Improved Head First Lounge 


Jom ws amy evening for ‘ . 
oF oF IMD af Ponce Dhacs refreshing elixim, comverssticn and maybe o geme 


¢ Mewoluties, Winclese peroee ta aliocas aac ae 
idn’t BYOWS (Bring Your Gwe Wed, Severh ROCHE TS always pravighed; 
Wow, no difference. Well, we didn 
really expect any because all the Directions 
doetype does is let the browser know 


. You'll fi in the 
for sure you're using, HTML. eal tind us night in thee 


nies of i 4 
Tinding ies, Chea cat cay deiaiod Syectinns toner a need help 


Add a doctype to the “directions.html” and “elixir.html’ file as well. Go ahead and give them a good 
test. Just like “lounge.html”, you won't see any fireworks (but you might sleep a bit better tonight). 


Exercise 
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Head First: HTML5, you’re the “latest and greatest” 
version of HTML that everyone’s yammering on about, 
but our readers want to know what’s so great about you. 


HTMLS: First off, I’ve got a bunch of new elements and 
some new attributes too. 


Head First: We don’t seem to be using any of those yet, 
are we? 


HTMLS: All the elements you’re using are part of my 
standard now, so you're using HTMLS5 elements. But no, 
youre not using any of the new ones yet... 


Head First: Why not? Shouldn’t we be using all the 
newest elements as soon as possible? 


HTMLS: Not necessarily. Remember (from Chapter 3): 
always use the right element for the job! And my newest 
elements have specific jobs. Some of them are for adding 
more structure and meaning to your page. Like my new 
<article> element, which is specifically for things like 
blog posts and news articles. 


Head First: We could have used that in Chapter 3 for 
Tony’s blog, right? 


HTMLS: That’s true...I’m sure you'll add it later on. 


Head First: I’m sure our readers are wondering, since 
they’re learning HTML in this book, if they need to go 
learn HTML5 instead? 


HTMLS: No! HTML5 is just the next evolutionary step, 
everything they’ve learned is exactly the same in HTMLS. 
HTMLS5 just adds some new stuff. In fact, we should stop 
saying “HTML5.” I’m just the latest version of HTML, 
so call me HTML. Saying HTMLS5 at this point is just 
confusing. 


Head First: Wait, after all the hype around HTMLS, are 
you really suggesting we do away with your name? 


HTMLS: I am. You already know I’m a living standard 
and version numbers are dead. Well, I’m a living standard 
for HTML, not HTML5. 
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HTML5 Exposed 


This week’s interview: 
What’s the big deal about HTML5? 


Head First: Got it. Our readers really should just 
continue learning HTML5—auhh sorry, HTML—and 
everything they’ve learned so far has been relevant. Not to 
mention all the new stuff ahead that they’ll be learning is 
the latest and greatest HTML technology. 


HTMLS: Exactly. 


Head First: I have to ask, though, I heard some of your 
new stuff is for building web apps. How does that relate? 


HTMLS: The biggest thing is that I’m not just for making 
web pages anymore; I’m designed for making full-blown 
web applications. 


Head First: What’s the difference? 


HTMLS: Web pages are mostly static pages. You’ll have 
some images and a bunch of links, and a few nice effects 
here and there, like on the menus, but for the most part 
pages are for reading. Web applications, on the other 
hand, are for interacting with, doing stuff with. Like the 
applications on your desktop, only with web applications, 
you're doing stuff on the Web. 


Head First: Can you give me an example? 


HTMLS: Social media apps, mapping apps, games...the 
list is endless. 


Head First: We couldn’t do that stuff before HTML5? 


HTMLS: Well, you could do some of it, but a lot of the 
features required to build those kinds of applications are 
being standardized for the first time with me. Before, if 
they existed at all, they were somewhat haphazard. 


Head First: I don’t think we’re going to be building any 
apps in this book, though. 


HTMLS5: No, but check out Head First HTML5 
Programming. That book is all about building web 
applications with me! 


Head First: We will! Thanks for being here, HTMLS5. 
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how to validate 


232 


your html 


Okay, that wasn't bad; now 
were telling the browser 
we're standard HTML. 


Jim: Yeah, really easy. But also 

a little anticlimactic...we put this 
doctype at the top of our file to tell 
the browser our page is HTML, but so 
what? Nothing really changes. 


Frank: Right, nothing you can see changes, but it 
does communicate to the browser that we’re using 
standard HTML. And the browser can use that 
information to its (and our) advantage. Plus, the boss 
wanted us to be writing totally legit HTML, and for 
that we need the doctype. 


Jim: Okay, 1s that it, then? Are we now writing 
industry standard HTML? 


Frank: As far as I know, but this is where it gets 
interesting. The one thing that can trip us up now 
is errors we might have introduced into the page. Say 

we forgot a closing tag? Or had a typo in a tag name? 


Jim: Oh right, well, wouldn’t we know it if we did? 


Frank: Not necessarily; the browser is pretty good at 
winging it when it sees errors. 


Jim: How about I get the guys together, and we do a review 
of the entire page? 


Frank: You may not need to...there are tools out there to help validate 
the page. 


Jim: Validate? 


Frank: Right, to go through the page and make sure all the markup is 
valid. Make sure we’re keeping to the standard. It’s a bit like a spell checker 
for HTML. 


Jim: Sounds like a good idea. Where do we get these tools? 
Frank: The standards guys over at the W3C have a validator, and it’s free. 


Jim: Great, let’s do it. 
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Meet the W3C validator 


Let’s check out the W3C validator and have it validate our 
lounge files. To follow along, just point your browser to 
http://validator.w3.org. 


lidator is located at ntte:// validator.w3-0r9, 


The W3C va 


There are three ways 
you can check your 
HTML: 


(1) [£ your page is on the Web, 
then you Can type in the URL 
here and click the Check button, 
and the service will retrieve Your : 
HTML and check it- Arteirestet 


Vaticste oy UF 
Vetidaie acdocumert onina: 


biiare Opiene 


(2) You ean choose the second 
tab, and upload a file from your 


ARS Mines fees oF ls 
computer. When you've selected fickieCH content of to tind broken inks. these //e omer vaskisiors nd boots aealatsn. 
the file, click Check, and the 
browser will upload the page for The WC vaikdators/4e devnloped with assistance tom the Mazita 295) 


the service to check. 
mozilla 


Slane. About News Dees Help AAO Foednece Gontibuie 


Bee aod help ue bei better tooks for o Eerter wel, 


(3) Ov, choose the third 
tab, and copy and paste Your 
HTML into the form on 
that tab. Then click Check 
and the service will check 
Your HTML. 


This service rut the Wo Miuaps Vindeeinr, Ys 
War Aus COPYRIGHT @ 19ee-2000 WES EMT, BACIM, KEIO, ny 
ALL, PHT S RESERVED. OG LIABILITY, TRADEMARK 
DOCUMENT USE AND SOFTWARE LICENBING FLILES APPLY. YOUR 
INTERAC TONG WITH THIS SITE ARE IN ACOGORDARGCE WITH OUR PUBLIC 
BHD MEMBER PRVAGY STATEMENTE 
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validating the lounge 


Validating the Head First Lounge 


We're going to use the third tab, “Validate by Direct Input” to validate 
the “lounge.html” file. That means we need to copy and paste the 
HTML from “lounge.html!” into the form on that tab; keep following 
along and give it a try... 


‘atime ey LF Weel fbfy Flin Updnered Welliate oy Bireot dig 


Valghip Oy Jira or wpa 


xii Lectead First Loengeatrh tLe 


WaeNetccee te the Hew cmd f 
alg ere="detnes girs sprived Heod First iLoungec/his 


ap 
Take 4 ory ryenitg far fefreshing 
= lair h “s 
rubs a pam br ton ct seaoiaareonet eset ote. 
‘ites Options, 
Cor. 


‘This vaiinietor cheacie Line [rman ve oP ae ciescurreerce in MTR STALE, Wika eo Ue 
i tm ade ep cond apch ws G5 Sion) Sects or O55 Siena, Motdwlk coment 
Sermo ber ks, there ao oohes vekeritions ann joaty weiiacie, = 
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m Dorn ord fed ues Beil Donker Soa Joy oer Seng 


Hee Abra Maw Gas Help Pld feectek Coneteie 


is Pha ao arm Tma VE: Mar maie MeO Yi 
Wa" COM GGT EMRE POR TAT, RCM MET, ALL UAT gma 
RESENRED WS LABILITY, TAD EMANS: SOC EAT We ak 
EOF TMATE LENE G ULES APA) OLE IMTERLECTGGE: WAT THE FFE ANE 
WV ACCC WITH OURLAILIS AND IE ORC TAT ERENTE 


We're using, method (3) here. We clicked on the “Validate by Diveet Input” tab 
and pasted the code for “lounge-html”, which now has the doetype for HTML 
at the top, into the form. We've ready for the big moment...will the web page 

validate? Bets anyone? Click Cheek (and turn the page) to find out... 
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Feel free to use 
method (I) or 
(2) if it’s more 


convenient. 


standards and all that jazz 


Houston, we have a problem... 


That red on the page can’t be good. It doesn’t look 
like the page validated. We’d better take a look... 


chimns Tee fictes aed Pere ey Yebtlaton Tiana 
We failed the seerar Hrserd tala saber oak 
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The W3C is constantly 
revising the validator. 


This doesn’t look bad. [+t looks like 


Because the W3C frequently we have bocce the all sltvihule- a 
Wateh it! revises the validator, you may the <imo> element. 
not see exactly the ahs nine 
_ No worries, just keep To 
es all the stuff in the next few 
pages is important, even if you don’t see 
the error above. 
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the alt at 


ute is required 


Fixing that error 


Okay, this looks pretty simple to fix. You just need to add an 
alt attribute to your <img> elements in HTMLS. Go ahead 
and open “lounge.html”, make the change, save, and then 
let’s try to validate again. 


<!doctype html> 


<html> 
<head> 
<title>Head First Lounge</title> 
</head> 
<body> 
<hl>Welcome to the New and Improved Head First Lounge</h1> 
<img src="drinks.gif" alt="Drinks" You know the alt attribute; 


is Wee add it into the <imo> element. 


Join us any evening for refreshing 
<a href="elixir.html">clixirs</a>, conversation and 
maybe a game or two of <em>Dance Dance Revolution</em>. 
Wireless access is always provided; BYOWS (Bring 
your own web server). 

</p> 

<h2>Directions</h2> 

<p> 
You'll find us right in the center of downtown 
Webville. If you need help finding us, check out our 
<a href="directions html">detailed directions</a>. 
Come join us! 

</p> 

</body> 
</html> 


S2eaiw 
TPQWwER 


Why do you think the alt attribute is required in HTML5? 
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standards and all that jazz 


We’re almost there... 


Success! We have a green bar on the page; that must be good. But there are three 
warnings. That sounds like we’ve still got a few things to take care of. Let’s take a look: 


We passed! But... 
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we didn’t supply one. 


So, we’ve got a valid file in terms of how we’ve written the 
HTML, but it looks like we need to do something about our 
“character encoding.” Let’s take a look at what that means... 
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we need a character encoding 


See, we're getting 
this warning message 

that the validator can't 
find a character encoding. 


a No Character ancecing declared at document lev 


Ha characte Bening [Pek PereeyTars Wares Puan WaT Thue cloacae, ett htecar En 
an ATML meta semen of an OML decdaraion. § is often meoommended in 

Beclare ihe character encoding if te decwenent liset, sapectally if thee a 
chance that the docunnné will be mead trom or saved io disk, OD, atc. 


Frank: The character encoding tells the browser what kind of 
characters are being used in the page. For instance, pages can be 
written using encodings for English, Chinese, Arabic, and lots of other 
types of characters. 


Jim: What’s so hard about figuring out how to display a character? If 
there’s an “a” in the file, then the browser should display an “a”. Right? 


Frank: Well, what if you’re using Chinese in your pages? It’s an 
entirely different “alphabet” and it has a heck of a lot more than 26 
A-Z characters. 


Jim: Oh. Good point...but shouldn’t the browser be able to tell the 
difference? Those other languages look nothing like English. 


Frank: No, the browser is just reading data. It can try to guess what 
kind of character encoding to use, but what if it’s wrong? This can lead 
not only to pages being displayed wrong, but also potential exploits 
from hackers. The character encoding takes the guesswork out of it. 


Jim: We’ve had the site up for a long time. Why is this an issue now? 


Frank: Because the validator is saying “Hey, if ’'m going to validate 
your page, you’d better tell me up front what characters you’re going 
to use!” And think about it, we’d want to do that for the browsers out 
there anyway. Don’t stress, we just need to add one more line to our 
HTML, called a <meta> tag. I should have thought of this sooner. 


Jim: Got any other surprises for us? I really thought our web page 
would validate after we put the document type definition in our file... 


Frank: | sure hope there are no more surprises! Let’s get the <meta> 
tag in there and find out. 
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Adding a <meta> tag to specify the character encoding 


Character encodings give us a way to represent all the letters, numbers and other symbols in our 
language on the computer. You might know of some of these encodings, like ASCII or even Morse 
code, and there are many other encodings out there. Luckily, the world has now standardized on 

the Unicode character encoding. With Unicode, we can represent all languages with one type of 
encoding. But, given there are other encodings out there, we still need to tell the browser we’re using 
Unicode (or another encoding of your choice). To specify Unicode for your web pages, you’ll need a 


<meta> tag in your HTML that looks like this: 


« ” neans weve The charset 

= nf ell the attribute is where 
Se somethin, we specify the 
“bout dhe R29¢ character encoding, 


Z 


The value of the 
charset attribute is 
the type of character 


encoding we're using, 


<meta charset="utf-8"> 


A) 


Just like other 
HTML tags, the 
<meta> {a9 has 
attributes. 


Spe no 


Questions 


pum 


Oe Doctypes, <meta> tags...ugh, do | need to really do all this 
to write web pages? 


A: Specifying a doctype and character encoding with a <meta> 
tag are kind of like taxes: you gotta do them to be compliant. Look 

at it this way: you already understand them more than 98% of the 
web page writing population, which is great. But at the end of the day, 
everyone just puts the doctype and <meta> tag in their HTML and 
moves on with life. So make sure you’ve got them in your HTML, and 
then go do something much more fun. 


: utf-8? 


: Work with us here. It’s like WD-40; you don’t worry about 
why it’s called that, you just use it. As we said, utf-8 (also written 
sometimes as UTF-8) is part of the Unicode encoding family. The u 
in utf-8 means Unicode. Unicode is a character set supported across 
many commonly used software applications and operating systems, 
and is the encoding of choice for the Web, because it 


i “t£-8” is an encoding in the 
Unicode family of encodings (one 


of several). “Atf_@” is the version 
we use for web pages. 


supports all languages, and multilingual documents (documents 

that use more than one language). It’s also compatible with ASCII, 
which was a common encoding for English-only documents. If you're 
interested in learning more about Unicode or character encodings in 
general, check out the information on character encoding at 
http:/Awww.w3.org/International/O-charset.html. 


Q: I've also seen <meta> tags that look like this: <meta http- 
equiv="Content-Type" content="text/html;charset=utf-8" >. Do | 
need to use this instead sometimes? 


: No. That is the format for the <meta> tag in HTML 4.01 and 
earlier. In HTMLS, you can just write <meta charset="utf-8">. 


Q: Is this why you had us save our files using utf-8 for the 
encoding way back in Chapter 1? 


A: Yes. You want the encoding of the file you're serving to the 
browser to match the encoding you specify in the <meta> tag. 
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using to specify a 


Making the validator (and more than a few 
browsers) happy with a <meta» tag... 


The <meta> tag belongs in the <head> element (remember that the <head> 
contains information about your page). Go ahead and add the <meta> tag line right 
into your HTML. Let’s first add it to the “lounge.html” file 


Here's the <meta> tag, We've 


<!doctype html> added it to the <head> element 
<html> above the <title> element. 
<head> 2? 2——— Add this line above any other 
<meta charset="utf-8"> elements in the <head> element. 
<title>Head First Lounge</title> 
</head> 
<body> 


<hl>Welcome to the New and Improved Head First Lounge</h1> 
<img src="drinks.gif" alt="Drinks"> 
<p> 
Join us any evening for refreshing 
<a href="elixir.html">eclixirs</a>, conversation and 
maybe a game or two of <em>Dance Dance Revolution</em>. 
Wireless access is always provided; BYOWS (Bring 
your own web server). 
</p> 
<h2>Directions</h2> 
<p> 
You'll find us right in the center of downtown 
Webville. If you need help finding us, check out our 
<a href="directions .html">detailed directions</a>. 
Come join us! 
</p> 
</body> 
</html> 


Want to place another bet? Is this going to validate? First, make the 
changes to your “lounge.html” file, save it, and reload it into your 
browser. Once again, you won't notice any change, but the drozwser will. 
Now let’s see if it validates... 
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Third time’s the charm? 


This time, we picked the second tab (validate by file upload). You can choose whichever 
method works best for you. If you want to try the upload method, then upload your 
“lounge.html” HTML file to the W3C validator web page at http: //validator.w3.org. 
Once you've done that, click the Check button... 


Markip Vabldation Sandee 
“Successfully checked as 
HT) M LS”! 
Love the green! 


SLT Wee Leese chee ee TS 


Pare. | eee 


We still have one yo ie Ew Fike avlectedd 
Har Way mreparies yor are Oye me Woe na cent Bp Inara bare 


warning,..but we dont 


. rs cli ali ei aa 
need to worry about it ere rd — = 
rs eS eee ual 
(see below). iced Ehren: hin 
dered ie ate oer 
Deore eeed foi uae be el bere jot Porn ete eh r= 
Cpr 
fee ie Chine Gare Sle Bieaeges ieqQeetod fire Diver eee ory ype 


REGGAE SC plicahl Verne Coane (Can ap Berke ee TPT 


Success! We can tell the 
boss we're writing totally 

industry standard HTML, and 
we can even say we're ready 
for HTML5. 


eRe os a bina 


ik wh) Pie ea! | ed 


Tina eg Pa Rg eg Reg eT a 
a Re Bee On Te LL Me Sy 
weitere seuéh: pediretp soars 8 in Pip eee in ceed fee peter fee ed, ey 
ed AT eM 


i Uerng aape rere! destues WALL? Cononunce Src. 


Fie wei OOH pla OU ee eee ee ce Cee Thi ie 
eT Mle Rees Poe poe Loreerace. Sul be eee ied iy Gee ud, ok ey i ee 
the bee eget ee eee. pe ed ey rs ee fg, bee ieee 
ram, Taare ey 


i ririaatioets 
Timm pedestal” cory epee iy \ Mpemae i TS Uhom rarer ed ee eee ry pee 
idenited Geet TTL ac et ee eoooeeniuy pec ceed 6 fore eelceior o  The pee e e 
sein Eau cd ino hha es eke TP 


This is just the same warning about the 
fact that we're using an “experimental 
service.” Nothing to worry about. 
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there are no a 
b Questions 


pum 


Q: The validator says it is experimental for HTML5. What 
does that mean? 


A: The message “Using experimental feature: HTML5 
Conformance Checker” in the validator means that the validator is 
checking your HTML according to the HTML5 standard, but because 
the HTMLS standard isn’t final (and still has new features being 
added), the validator is prone to change, so the results you get 
when you validate your page aren't set in stone. That means, as a 
conscientious developer, it’s in your best interest to stay up-to-date 
on the HTML standard, and check your pages fairly regularly. 


Q: What have we really achieved in this chapter? My page 
still looks the same. 


A: In this chapter we've tweaked your page slightly so that it is 
compliant with the HTML specification. What good is that? The closer 
you are to the spec, the more likely that your page is going to perform 
well in the real world. If you're producing a professional web page, 
you want it to be written using the industry standard, and that’s what 
we've done in this chapter by adding a doctype, setting a character 


encoding, and cleaning up an oversight (the alt attribute) in the HTML. 


Q: Why do we need that alt attribute anyway? 


A: For two great reasons. First, if your image is broken for some 
reason (say, your image server goes down, or your connection is 
really slow), the alt attribute will (in most browsers) show the alt text 
you've specified in place of the image. Second, for vision-impaired 
users who are using a screen reader to read the page, the screen 
reader will read the alt text to the user, which helps them understand 
the page better. 


Q: What if | tell the browser I’m using HTMLS, and I’m not? 


A: The browser will figure out that you’re not really writing HTML5 
and use the error handling capabilities it has to try to do the right 
thing. And then you're back to the problem of having the various 
browsers handle your page in different ways. The only way you can 
get predictable results is to tell the browser you're using HTML5 and 
to actually do so, properly. 
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Q: We talked a little about HTMLS5, but | want make sure I’m 
clear: is there any difference between the HTML we’re writing 
and HTML5? 


A: We're using standard HTML, which is HTML5. Now, HTML5 
introduced some new markup (which we'll be seeing soon enough) 
as well as support for writing web applications (which we won't be 
doing in this book), but HTML5 is HTML, and everything you've 
been writing is HTML5 “compliant.” So, sorry for the terminology, but 
going forward everything is just HTML, including all the new features 
provided by the HTML5 specification. 


The good news is that everything you've learned is all ready for 
HTMLS, and in fact you see how little you actually had to do to go 
from an “informal HTML” page to a professional HTML page. That 
said, you might want to tell your boss you're already using HTML5 
just for bonus points toward your next raise. 


Q: What’s the big deal with HTML5 compared to HTML 4.01 
anyway? 


A: The big deal about HTMLS is threefold. First, there are some 
new elements and attributes in HTML65 that are pretty cool (like the 
<video> element), and others that will help you write better pages 

(we'll be getting to those later in the book). 


Second, there are many new features that allow web developers 

to create web applications with HTMLS. Web applications are web 
pages that behave more like applications (like the ones you're used 
to using on your laptop or mobile device) than static web pages. If 
you're interested in creating web applications, then after you're all 
done with this book (cue shameless plug), you should check out 
Head First HTML5 Programming (O'Reilly). 


Finally, the HTML5 specification is a lot more robust than the 
specifications for the previous versions of HTML. Remember how we 
said that the specification is now documenting common errors that 
web developers make? And helping browsers to know how to handle 
those errors? That means that web pages with errors on them don't 
cause the havoc they used to, which is a good thing for users. 


All in all, HTMLS is a big improvement over HTML 4.01, and well 
worth learning. We'll get you up to speed quickly over the next few 
chapters. 
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Your turn. Add the <meta> tag to “directions.html” and “elixir.html’. Try validating 
them; do they validate? If not, fix them so that they do. 


Exercise 


Use this space for notes about ee oe 


validating experience! 


Time to play a little game with the validator. Take the code you just successfully 
validated as HTML5 (on page 241), and remove the doctype. That's right—remove it, 
Exerci$e just to see what happens when you validate. Go ahead and submit this version of the 
; file to the validator and see what happens. Make notes below about the errors you get. 


<tdoctypehtmi> 4— Ronove the doetype! 
<html> 


<head> 
<meta charset="utf-8"> 
<title>Head First Lounge</title> 
</head> 
<body> 
<hl>Welcome to the New and Improved Head First Lounge</hl1> 
<img src="drinks.gif" alt="Drinks"> 
<p> 
Join us any evening for refreshing 
<a href="elixir.html">clixirs</a>, conversation and 
maybe a game or two of <em>Dance Dance Revolution</em>. 
Wireless access is always provided; BYOWS (Bring 
your own web server). 
</p> 
<h2>Directions</h2> 
<p> 
You'll find us right in the center of downtown 
Webville. If you need help finding us, check out our 
<a href="directions .html">detailed directions</a>. 
Come join us! 
</p> 
</body> 
</html> 


bout the type of 
Your notes here. How ma What does this tell eta 2 
errors did you net? ‘ i your HTML if you don't intlude a doctypes 
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tips for good him! 


Calling all HTML professionals, grab the handbook... 


Welcome to the elite set of HTML crafters, those who know how to create professional 

pages. There’s a lot to remember, so the City of Webville prepared a handy guide to creating 
industry standard pages. This guide is meant for you—someone who is new to Webville. It 
isn’t an exhaustive reference, but rather focuses on the more important best practices in 
building your pages. And you'll definitely be adding to the knowledge in this guide as you get 
to know your way around Webville in coming chapters. But for now, take one—they’re FREE. 
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Webville Guide to HTML 


In this handy guide, we've boiled down writing well-formed HTML pages 
into a common sense set of guidelines. Check them out: 


Always begin with the <doctype>. 


Always start each page with a doctype. This will 
get you off on the right foot with browsers, and 
with the validator too. 


Use <!docytype html> at all times, unless 
you really are writing HTML 4.01 or XHTML. 


The <html> element: don’t leave home without it. 


Following the doctype, the <htm1> element must 
always be the top, or root, element of your web 
page. So, after the doctype, the <htm1> tag will 
start your page and the </htm1> tag should end it, 
with everything else in your page nested inside. 


Remember to use both your <head> and your 
<body> for better HTML. 


Only the <head> and <body> elements can go 
directly inside your <htm1> element. This means 
that every other element must go either inside the 
<head> or the <body> element. No exceptions! 


Feed your <head> the right character encoding. 


Include a<meta charset="utf-8"> tag in your 
<head>. The browser will thank you, and so will 
your users when they’re reading comments on your 
blog from users around the world. 
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Webville Guide to HTML, continued 


In this handy guide, we've boiled down writing well-formed HTML pages 
into a common sense set of guidelines. Check them out: 


What’s a <head> without a <title>? 
Always give your <head> element a <title> 
element. It’s the law. Failure to do so will result in 
HTML that isn’t compliant. The <head> element 
is the only place you should put your <title>, 
<meta>, and <style> elements. 


Be careful about nesting certain elements. 


Within the guidelines we've provided here, the 
nesting rules are fairly flexible. But there are a couple 
of cases that don’t make sense. Never nest an <a> 
element inside another <a> element because that 
would be too confusing for our visitors. Also, void 
elements like <img> provide no way to nest other 
inline elements within them. 


Check your attributes! 


Some element attributes are required, and some are 
optional. For instance, the <img> element wouldn't 
make much sense without a src attribute, and now 
you know the alt attribute is required too. Get familiar 
with the required and optional attributes of each 
element as you learn it. 
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HTML. _ 
Archaeology Ce 
eS 


Throughout this book you've been using elements and attributes that are all part 

of the current HTML standard. So, you haven’t had much opportunity to see the . 
phased-out elements and attributes. Most of those elements actually got phased a | 
out in HTML 4.01, but they may still be hanging around in old web pages, so it 

doesn’t hurt to know a little about these legacy elements. We did some digging 

and found an HTML 3.2 page that contains some elements and attributes that are 

no longer part of the standard, as well as a couple of common mistakes that are 

not recommended in modern HTML. 


<html> 
<head> 
<title>Webville Forecast</title> flere are some attributes that 


</head> ——— controlled arena nee sets ; 
the background Color he page, an 
an ; : lor of the body text. 


é 
<body bgcolor="tan" text="black"> text sets the Co 


<p> 
The weather report says lots of rain and wind in store for 
<font face="arial">Webville</font> today, so be sure to 
stay inside if you can. 


sk i‘ Font changes were made with the 
efont> element and its face attribute. 
<ul> 
<li>Tuesday: Rain and 60 degrees. <— You tould get away without seme 


<li>Wednesday: Rain and 62 degrees. 2 Closing, tags, like </li> and <> 
</ul> You sometimes still can, but it is 


not recommended! ! 


<p sigwas= Missing quotes around attribute values. 
Quotes are always recommended now, and 


i umbrella! 
ete tee ces required for attributes with multiple values. 


<center><font size="small">This page brought to you buy Lou's 
Diner, a Webville institution for over 50 years. 


</font></center> S ~~. Text size was controlled 
Here were two ways to align with the <font> element, 
</body> text. Right—align a paragraph, using the size attribute. 
</html> or center a piece of text. 
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a BE the Validator 


Below, you']] find an HTML file. Your 
job is to play like you're the validator 
and Jocate ALL the errors. After 
you've done the exercise, look at the 
end of the chapter to see if you caught 
them al]. 


Use the validator to check 
your work once Youre done 


Cor if you need hints). 


<html> 
<head> 


<meta charset="utf-9"> 


</head> 
<body> 


<img src="chamberofcommerce.gif"> 


<h1l>Tips for Enjoying Your Visit in Webville 
<p> 
Here are a few tips to help you better enjoy your stay in Webville. 
</p> 
<ul> 
<li>Always dress in layers and keep an html around your 
head and body.</1i> 
<li>Get plenty of rest while you're here, sleep helps all 
those rules sink in.</1li> 


<1i>Don't miss the work of our local artists right downtown 
in the CSS gallery. 
</ul> 
</p> 
<p> 
Having problems? You can always find answers at 
<a href="http: //wickedlysmart.com"><em>WickedlySmart</em></a>. 
Still got problems? Relax, Webville's a friendly place, just ask someone 
for help. And, as a local used to say: 
</p> 
<em><p> 
Don't worry. As long as you hit that wire with the connecting hook 
at precisely 88mph the instant the lightning strikes the tower... 
everything will be fine. 
</em></p> 


</body> 
</html> 
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Getting our HTML 
up to snuff wasn't too hard, but it 
sure took a while to figure it all out. 
And now we've got to style these 

pages with CSS. That's a whole 
different language, isn't it? 


aaa POINTS 


HTML4 is the current HTML standard. = Most web pages use the utf-8 encoding for HTML 
= The World Wide Web Consortium (W3C) is files, and for the <meta> tag charset attribute. 


the standards organization that defines what = The alt attribute is required for the <img> 
standard HTML is. element. 

= The document type definition (doctype) is used = The WSC validator is a free online service that 
to tell the browser the version of HTML you're checks pages for compliance with standards. 
i = Use the validator to ensure that your HTML is 

= = =The HTML standard is now a “living standard,” well formed and that your elements and attributes 
which means that the standard will change to meet the standard. 


ico portale: ewilealiiee ane Upacies: = By adhering to the standard, your pages will 


= The <meta> tag in the <head> element tells the display more quickly and with fewer display 
browser additional information about a web page, differences between browsers, and your CSS will 
such as the content type and character encoding. work better. 


= ©The charset attribute of the <meta> tag tells the 
browser the character encoding that is used for 
the web page. 
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HTMLecross 


It’s been a heck of a chapter. Go ahead and grab a cup of your favorite beverage, sit 


back, and strengthen those neural connections by doing this crossword. All the answers 


come from the chapter. 


1 2 


4 5 
6 
8 
10 11 
14 

Across 

1. Victim of the browser wars. 

4. The HTML standard is a standard. 


6. Required in the <head> element. 

8. Web standards makers have promised future 
HTML will be 
10. The boss wanted to standardize before adding 


to the Lounge pages. 


11. When your HTML meets the standard, it is this. 
14. Definition that tells the browser and validator 
what kind of document you're creating. 


compatible with older HTML. 


Down 

1. Standards organization that supplies the 
validator. 

2. Microsoft versus Netscape. 

3. <img> attribute required in standard HTML. 
5. This service will check your HTML for 
compliance with the standard. 

7. The older were much more complicated 
compared to the newest one. 

9. Where you put information about the page. 
12. Where you put web page content. 

13. The most common encoding for web pages. 
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bi Ee the Validater 


Uffen 


Below, you']] find an 

HTML file. Your job 
is to play like you're 
the validator and 
locate ALL the errors. 
Here’s the solution. 


Missing doetype 
f Should be “utf-8” instead of 


<html> “ut f-9 (which doesn’t exist!) 
<head> <title> should be 


<meta charset="utf£-9"> , inte eheads: 


</head> 
<body> 
ge src="chamberofcommerce.gif"> ———— No alt attribute — 
<h1l>Tips for Enjoying Your Visit in Webville Cc Missing </hl> tag, This will cause 
as problems with the <p> element below. 
Here are a few tips to help you better enjoy your stay in Pecan a 
</p> 
<ul> 
<li>Always dress in layers and keep an html around your 
head and body.</1i> 
<li>Get plenty of rest while you're here, sleep helps all 
those rules sink in.</li> 


<1i>Don't miss the work of our local artists right downtown 


in the CSS gallery. <—— Missing </li> tag. This will still validate, 
</ul> but it’s not recommended! 


ae IK Extra </p> that doesn’t match a <p> 


<p> 
Having problems? You can always find answers at 
<a href="http: //wickedlysmart.com"><em>WickedlySmart</em></a>. 
Still got problems? Relax, Webville's a friendly place, just ask someone 


for help. And, as a local used to say: 
</p> 
<em><p> 4 


Don't worry. As long as you hit that wire with the connecting hook 


<em> and <p> tags are switched. 


at precisely 88mph the instant the lightning strikes the tower... 
everything will be fine. 
</em></p> 
</body> 
</html> 
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HTMLCross Solution 


WIE/B/DIE;|ViE;|LJO|P/E]R 


3 R 
Cc O “A 
W ‘L IV ING 
s T A 
E L 
R "<|TII|T|/ LE] > 
W D D 
‘BACKWARD S °H O 
R T E Cc 
3G |S "'C/O|IM|P|LIT/AIN|T 
R D y 
'B U P 
‘DIO|C|TIY|PIE 
D S 
y 8 


Your turn. Add the strict doctype and the <meta> tag to 
_ “directions.html” and “elixir.html’. Try validating them—do 
; Reise they validate? If not, fix them so that they do. 


Lution Solution: To validate “elixir.html”, you'll have to add the 
alt attribute to each of your <img> elements. 
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Time to play a little game with the validator. Take the code you just successfully 
or validated as HTML5 (on page 241), and remove the doctype. That's right—remove it, 
Exerci$e just to see what happens when you validate. Go ahead and submit this version of the 
. file to the validator and see what happens. Make notes below about the errors you get. 


<tdoctypehtmi> 4— Remove the doetypel 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Head First Lounge</title> 
</head> 
<body> 
<hl>Welcome to the New and Improved Head First Lounge</hl1> 
<img src="drinks.gif" alt="Drinks"> 
<p> 
Join us any evening for refreshing 
<a href="elixir.html">elixirs</a>, conversation and 
maybe a game or two of <em>Dance Dance Revolution</em>. 
Wireless access is always provided; BYOWS (Bring 
your own web server). 
</p> 
<h2>Directions</h2> 
<p> 
You'll find us right in the center of downtown 
Webville. If you need help finding us, check out our 
<a href="directions.html">detailed directions</a>. 
Come join us! 
</p> 
</body> 
</html> 


We get three errors and four warnings if we try to validate without 
the dottype. The validator assumes we're writing HTML 4.01 
Transitional (which was a version of HTML 4.0] designed to use while 
You were “transitioning” to XHTML). The validator really doesn’t like 
that there’s no doctype, and complains a couple of times about that. 

It also complains about the <meta charset=“utf-8">, because before 
HTML, charset was not a valid attribute of the <meta> tao, You can 
get the idea that using a doctype makes both the validator, and the 
browsers, happier campers. 


Your notes here. How many 
errors did you get? 7 
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7 getting started with CSS 


wa 
* Adding a Little Style’ 


Don't get me wrong, the 

hair, the hat—it all looks great. — ' : | 
But don't you think he'd like it if JO 9 =< 4 
you spent a little more time adding he i = 
some style to your HTML? 


| was told there’d be CSS in this book. So far you've been 


concentrating on learning HTML to create the structure of your web pages. But as 


you can see, the browser’s idea of style leaves a lot to be desired. Sure, we could 
call the fashion police, but we don’t need to. With CSS, you’re going to completely 
control the presentation of your pages, often without even changing your HTML. 
Could it really be so easy? Well, you are going to have to learn a new language; 
after all, Webville is a bilingual town. After reading this chapter’s guide to learning the 
language of CSS, you’re going to be able to stand on either side of Main Street and 


hold a conversation. 


www.it-ebooks.info 


255 


Remember the Wizard of Oz? Well, this 
is the part of the book where things 
go from black and white to tolor. 


Wey: toad Rial Lae ga 


ana ena aa 
te See etna 7 ge renege 
“nl a 


You're not in Kansas anymore Our Elixirs 


Green Tee Cooler 


You’ve been a good sport learning about markup 

and structure and validation and proper syntax and 
nesting and compliance, but now you get to really 
start having some fun by styling your pages. But no 
worries, all those HTML push-ups you’ve been doing 
aren’t going to waste. In fact, you’re going to see that 
a solid understanding of HTML is crucial to learning 


(and using) CSS. And learning CSS is just what we’re ‘Sunde 
going to do over the next several chapters. L 

Just to tease you a bit, on these two pages we’ve 
sprinkled a few of the designs you’re going to work 
with in the rest of the book. Quite a difference from 
the pages you’ve been creating so far, isn’t it? So, 


what do you need to do to create them? Learn the 
language of CSS, of course. 


tl deal 
| Ga tst eee eee 
| se Ten eran 


Let’s get started... 
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Welcome ts the Has’ Pinel Loge 


Fie Fae Pea. ni i Fe De, Fe rel a Spaata 
Po, Wh eR Tt TE Hg er, Be 

2 ee ee ey oe ee 

ey a hay of a, eg, 

cae a im ee fot Po et ieee igre, 

TAS raked Ser BA dk, eb Rey DD ene cd gy 
Se eT ee, Se ee er ee a i 

2 Te pe ey eres, Pee eee euler 

Fame mri he ememieny amedieeeeds oF lage beers set jab, Lomas Gee 
mer Pi pedi) fae emcees Pree mitinie qrmra: tm ae 


ta ir, BW Feng pre tess a ee 


bel a ae 
SS es ee ee ee od 
OEE Ae ir eM ed deere Ener in -beg 
et ara a nar sci toe ey pee oo eg er, Fy 
aoe ier eee ae eed Feet ee ene eigen pari a 
ar Fw eg ee ee 


' Believe T fray 
were hee wit nae Ton on Becpw sot Laas Beckag 
Oring a 


bl T wasnt mien 


Zt the absentia 
ra BAe Lan Tzy witegh 
ane Mikes baping with oe gece A. "A journey of 9 
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Overheard on Webville’s “Trading Spaces” 


Not up on the latest reality TV? No problem, here’s a recap: take two 
neighbors, two homes, and $1,000. The two neighbors switch homes, and 
using the $1,000, totally redesign a room or two in 48 hours. Let’s listen in. 


..and this bathroom needs some 
serious help! 


bathroom { 


tile: 


lin white; 
Okay, let's get some design in this place... 


drapes: pink; 


bedroom { 


drapes: blue; 


carpet: wool shag; 


Of course, in the Webville edition of the show, everyone talks about 
design in CSS. If you’re having trouble understanding them, here’s a little 
translation tip: each statement in CSS consists of a location (like bedroom), 


a property in that location (like drapes or carpet), and a style to apply to 
that property (like the color blue, or 1 inch tiles). 
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Using CSS with HTML 


We’re sure CSS has a bright future in the home design category, but let’s 
get back to HTML. HTML doesn’t have rooms, but it does have elements, 
and those elements are going to be the locations that we’re styling. Want to 
paint the walls of your <p> elements red? No problem; only paragraphs 
don’t have walls, so you’re going to have to settle for the paragraph’s 
background-color property instead. Here’s how you do that: 


. in 1 leet the 
- ae Sl ee 7. ge tase ‘Then you specify the property you 
clement Y L. Notite in CSS, you want to style, in this case the <p> 


the <p> elemen element's background color. 


don't put <> around the name- 
y / And you're going to set the 
p { background-color to ved. 
background-color: red; 


) NX At the end, put 
a semicolon. 
There’s a Colon in between 


Place all the styles the property and its value. 


or the <p> element: in 

between { } braces. Il the whol 
We call the whole 
thing a RULE. 


You could also write the rule like this: 
p { background-color: red; } 


Here, all we’ve done is remove the linebreaks. As with HTML, you can format 
your CSS pretty much as you like. For longer rules, you’ll usually want to add 
some linebreaks and indenting to make the CSS more readable (for you). 


Wanna add more style? 


You can add as many properties and values as you like in each CSS rule. Say you 
wanted to put a border around your paragraphs, too. Here’s how you do that: 


P{ All you have to do is add 
background-color: red; S another property and value. 
border: lpx solid gray; 

} 

The <p> element will that is | pixel thick, solid, and 9ray- 


have a border... 
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there are no 5 
Dumb Questions 


Q: Does every <p> element have the same 
style? Or can I, say, make two paragraphs different 
colors? 


A: The CSS rules we've used so far define the style 
for all paragraphs, but CSS is very expressive: it can 
be used to specify styles in lots of different ways, for 
lots of different elements—even subsets of elements. 
You'll see how to make paragraphs two different colors 
later in this chapter. 


Q: How do | know what properties | can set on 
an element? 


A: Well, there are lots of properties that can be 
set on elements, certainly more than you'd want to 
memorize, in any case. You're going to get quite 
familiar with the more common properties in the next 
few chapters. You'll probably also want to find a good 
CSS reference. There are plenty of references online, 
and O'Reilly's CSS Pocket Reference is a great little 
book. 


Q: Remind me why I’m defining all this style in 
a separate language, rather than in HTML. Since 
the elements are written in HTML, wouldn’t it be 
easier just to write style in HTML, too? 


A: You're going to start to see some big advantages 
to using CSS in the next few chapters. But here’s a 
quick answer: CSS really is better suited for specifying 
style information than HTML. Using just a small bit of 
CSS, you can create fairly large effects on the style 

of your HTML. You're also going to see that CSS is a 
much better way to handle styles for multiple pages. 
You'll see how that works later in this chapter. 
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io SE RAIN 

-‘PQWER 
Say you have an <em> element 
inside a paragraph. If you change the 
background color of the paragraph, do 
you think you also have to change the 
background of the <em> element so it 


matches the background color of the 
paragraph? 
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Getting CSS into your HTML 


You know a little about CSS syntax now. You know how to select an element and then 
write a rule with properties and values inside it. But you still need to get this CSS into 
some HTML. First, we need some HTML to put it in. In the next few chapters, we’re 
going to revisit our old friends—Starbuzz, and Tony and his Segway journal—and 
make things a little more stylish. But who do you think is dying to have their site styled 
first? Of course, the Head First Lounge guys. So, here’s the HTML for the Head First 
Lounge main page. Remember, in the last chapter we fixed things up a little and made 
it proper HTML (would you have expected any less of us?). Now, we’re adding some 
style tags, the easiest way to get style into your pages. 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Head First Lounge</title> 


Heve’s what we're interested in: the <style> element. 
<style> ie To add CSS style directly to your HTML, add 


+ — opening and Closing style tags in the <head> element. 


</style> 
And your CSS rules are Going 

</head> to go right in here. 
<body> 

<hl>Welcome to the Head First Lounge</h1> 

<p> 

<img src="images/drinks.gif" alt="Drinks"> 
</p> 
<p> 


Join us any evening for refreshing 
<a href="beverages/elixir.html">elixirs</a>, 
conversation and maybe a game or two of 
<em>Dance Dance Revolution</em>. 
Wireless access is always provided; 
BYOWS (Bring your own web server). 
</p> 
<h2>Directions</h2> 
<p> 
You'll find us right in the center of downtown 
Webville. If you need help finding us, check out our 
<a href="about/directions.html">detailed directions</a>. 
Come join us! 
</p> 
</body> 
</html> 
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But not necessarily the 
best way. We'll come 
back to this later in 
the chapter and see 
another way. 
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Adding style to the lounge 


Now that you’ve got the <style> element in your HTML, you’re going to add some style 
to the lounge to get a feel for writing CSS. This design probably won’t win you any “design 
awards,” but you gotta start somewhere. 


The first thing we’re going to do is change the color (something to match those red lounge 
couches) of the text in the paragraphs. To do that, we’ll use the CSS color property like this: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Head First Lounge</title> 
<style> 


dake ies alti The property to change the font color is 
: gong he ae C9 » . . k it ld b 
the font color tl the named “olor” (you might thin it would be 
paragraphs. Pp { “Lont—tolor” or “text—color”, but it’s not). 


We've selecting i“ 7 eoaea cae: We're setting the text to a 
} 


the <p> elemen 


lovely maroon Color that ha 
apply this style to. to match wineug. 

</style> 

</head> 

<body> 
<hl>Welcome to the Head First Lounge</h1> 
<p> The p selector 

<img src="images/drinks.gif" alt="Drinks"> selects all the 

</p> paragraphs in the 
<p> HTML. 


Join us any evening for refreshing 
<a href="beverages/elixir.html">elixirs</a>, 
conversation and maybe a game or two of 
<em>Dance Dance Revolution</em>. 
Wireless access is always provided; 
BYOWS (Bring your own web server). 
</p> 
<h2>Directions</h2> 
<p> 
You'll find us right in the center of downtown 
Webville. If you need help finding us, check out our 
<a href="about/directions .html">detailed directions</a>. 
Come join us! 
</p> 
</body> 
</html> 
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Cruising with style: the test drive 


Go ahead and make all the changes from the last couple of pages 
to your “lounge.html” file in the “chapter7/lounge” folder, save, 
and reload the page in your browser. You'll see that the paragraph 
text color has changed to maroon: 


nla) 


= Hage bint Longe 
De wf el +] 2 masspcteence? inaeapestnurege Men! 


Welcome to the Head First Lounge 


Everything else is as it 
I | Tt | " —_—_r- should be: the headings 


ave still black, because 
all we selected to style 


Jini i wey every Int iris cliain, Greresranine en re & pete or Ee were the <p> elements. 
Of Deere Basse Arelaton. Wireleis atte if alae gnivided; A YOWS (rie 


) 
Here's our Pour el eb aerred. 


new maroon 


paragraph Directions 
text. oul fad ia righ in the coer of doweiowe Woh e Ht poo peel bet Siding 


ur, check ourour dehy ibed forest copy, Conan jem ue! 

Neti that the color 
of the links didn't 
change. Keep that in 
the back of your mind... 


SOR RAI 
PQwerR 
Instead of setting the color, what if you set background-color of 


the <p> elements to maroon instead? How would it change the 
way the browser displays the page? 
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Style the heading How about a different 


font for the lounge headings? 
Make them really stand out. 
I'm seeing big, clean, gray... 


Now let’s give those headings some style. How about changing the 
font a bit? Let’s change both the type of font, and also the color of 
the heading fonts: 


cee a. Here’s the rule to select 
font-family: sans-serif; chi> elements and change 
sata SPENT the Lont—Lamily to 

sans—serit and the ont 

tolor to gray: We'll talk a 

lot more about fonts later- 
font-family: sans-serif; 

é' color: gray; SN And here’s another rule to 

do the exact same thin 


p { the <h2> element. 
color: maroon; 


} 


Actually, because these rules are exactly the same, we 
can combine them, like this: 


a write a rule Lor more than one 
just, put Commas between 


element, jus : ; 
os renee sans-serif; the eletbos mean 
color: gray; 
} 
Pp { 
color: maroon; 
} Lis Beal fad Limanae 
(Oo CG Loe 
Test drive... Welcome to the Head First Lounge 
Add this new CSS to your “lounge.htm!” file 
and reload. You'll see that with one rule, you’ve IW | Ti) ¥ 
selected both the <h1> and <h2> headings. = 
Tian od hie ecg ie eg oy. cae ice fe) a Ee cies Fe 
Both of the headings Dace Gouna Plrrewtiraee. OV iarticve cree we ibd perpetabest AY OPW [Bictatiy peor 


MG wl SL 


on the page are now SHER 
styled with a sans—sevit Fe Directions 


Font and colored gray: ——— 
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Let’s put a line under the welcome message too 


Let’s touch up the welcome heading a bit more. How about a line under it? That 
should set the main heading apart visually and add a nice touch. Here’s the 
property we'll use to do that: 


border-bottom: lpx solid black; 
~_————- 


This property controls Tum bo style the 
how the border under an nen oe : that it is 2 
clement looks. |_pixelthiek, solid black line- 


The trouble is, if we add this property and value to the combined h1, h2 
rule in our CSS, we’ll end up with borders on both our headings: 


hl Ud pe Here were adding, a property 


font-family: sans-serif; bo change the bottom border 
oe EUR EDeUN gE SSIUENEIEE for both the <hl> and <h2> 
order-bottom: x soli ack; 
} . < elements. 
Pp { 
color: maroon; 
} ae Head Font Linings = 
na 
; Welcome to the Head First Lounge 
It we do this... 
WE get bottom borders : 
on both our headings. Not —M——~> Ly T iy 
what we want. a 
So, how can we set the bottom border a Rak aC EORTE ero SE aetdad UYCWS [icing poor 
on just the <h1> element, without cenwah saver 


affecting the <h2> element? Do we have 
to split up the rules again? Turn the 
page to find out... 


Directions 


Veal! fad at agit 6 te ceater A deere Webi. [Pei td bel fieblbe g uit 
check mut oer dpa deci Cone po uw 
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We have the technology: specifying a 
second rule, just for the <hi> 


We don’t have to split up the h1, h2 rule, we just need to add another 
rule that is only for hl and add the border style to it. 


The first rule stays the same. We've 


Bie he I — still eons to use a Combined rule 


font-family: sans-serif; 


16ers ; for the Font—family and tolor for 

color: gray; both <hl> and <h2>. 
ay £— But now we're adding a second rule 

border-bottom: 1px solid black; that adds another Property just to 
' <hl>: the border—bottom property, 
P { 

color: maroon; 
} 


Another test drive... ate 


Change your CSS and reload the page. You'll see that the new rule 
added a black border to the bottom of the main heading, which gives 
us a nice underline on the heading and really makes it stand out. 


are =a Heed Fotpt Liew ape 


ee i ee epee Tp eT 


Here’s the | Welcome to the Head First Lounge _ 


in black. ji ¥ F v 


Join We any ercning for eearaing ikon, ct: aed ree ge oe 
Chore Lease Alsi Wii aoe hye pervaded: Ws. Liege 
| ed ee evel 


And no border Directions 
here—just what Fw 0) ed wo rig i the conden of ewes Wc ye net! bcp hein en, 
we wanted hentai Uedons Ogee pote 
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Q: So how does that work when you 
have more than one rule for an element? 


A: You can have as many rules as you 
want for an element. Each rule adds to the 
style information of the rule before it. In 
general, you try to group together all the 
common styles between elements, like we 
did with <h1> and <h2>, and then any style 
that is specific to an element, you write in 
another rule, like we did with the border- 
bottom style for the main heading. 


thereyareno 
Dumb Questions 


Q: What’s the advantage of that 
approach? Isn’t it better to organize each 
element separately, so you know exactly 
what styles it has? 


A: Not at all. If you combine common 
styles together, then if they change, you 
only have to change them in one rule. If you 
break them up, then there are many rules 
you have to change, which is error-prone. 


So, how do selectors really work? 


You’ve seen how to select an element to style it, like this: 


— We call this the selector. 


La, 
hl { 
color: gray; 


} 


mx N\ The style is applied to the elements 


destribed by the selector—in this 
tase, <hl> elements. 


Or how to select more than one element, like this: 


Another selector. The style is applied to <hl> and <h2> 


elements. 
a aia 
hi, h2 { 
color: gray; 


} 


getting started css 


Q: Why do we use a bottom border to 
underline text? Isn’t there an underline 
style for text? 


A: Good question. There is an underline 
style for text and we could use that instead. 
However, the two styles have slightly 
different effects on the page: if you use 
border-bottom, then the line will extend to the 
edge of the page. An underline is only shown 
under the text itself. The property to set text 
underline is called text-decoration and has a 
value of “underline” for underlined text. Give 
it a try and check out the differences. 


You're going to see that CSS allows you to specify all kinds of selectors that determine which elements 


your styles are applied to. Knowing how to use these selectors is the first step in mastermg CSS, and 
to do that you need to understand the organization of the HTML that you’re styling. After all, how 
can you select elements for styling if you don’t have a good mental picture of what elements are in the 
HTML, and how they relate to one another? 


So, let’s get that picture of the lounge HTML in your head, and then we’ll dive back into selectors. 
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drawing the lounge’s structure 


Lf = iene 
cot 

eas \ Mar kup Magnets 

= q Remember drawing the hierarchy diagram of HTML elements in 
Chapter 3? You're going to do that again for the Lounge’s main page. 
Below, you'll find all the element magnets you need to complete the 
diagram. Using the Lounge’s HTML (on the right), complete the tree 
below. We've done a couple for you already. You'll find the answer in 
the back of the chapter. 


—_ 


img 
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meta 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Head First Lounge</title> 


<style> 
hl, h2 { 
font-family: sans-serif; 
color: gray; 
} 
hl { 
border-bottom: lpx solid black; 
} 
pit 
color: maroon; 
} 
</style> 
</head> 
<body> 
<hl>Welcome to the Head First Lounge</h1> 
<p> 
<img src="images/drinks.gif" alt="Drinks"> 
</p> 
<p> 


Join us any evening for refreshing 
<a href="beverages/elixir.html">elixirs</a>, 
conversation and maybe a game or two 
of <em>Dance Dance Revolution</em>. 
Wireless access is always provided; 
BYOWS (Bring your own web server). 
</p> 
<h2>Directions</h2> 
<p> 
You'll find us right in the center of downtown 
Webville. If you need help finding us, check out our 


<a href="about/directions.html">detailed directions</a>. 


Come join us! 
</p> 
</body> 
</html> 
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visual selectors 


Seei @ ec or { We ¢an only style 

ng selectors visually Me can oly se 
Let’s take some selectors and see how they map so we're not showing 

to the tree you just created. Here’s how this “h1” the <head> element . 
selector maps to the graph: and everything under it- 


hl { 


font-family: sans-serif; 


This selector matches any 
<hi> elements in the page, 
and there’s only one- 


And here’s how the “h1, h2” selector looks: 


hl, h2 { 


font-family: sans-serif; 


Now the selector f 


matches both <hl> 
and <h2> elements: 


If we use a “p” selector, here’s how that looks: 


p{ 
font-family: sans-serif; 


1 
This selector matthes all the —7~ 


<p> elements in the tree. 
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your pencil 


Color in the elements that are selected by these selectors: 


p, h2 { 


font-family: sans-serif; 


p, em { 


font-family: sans-serif; 
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The Case of Brute Force Versus Style 


When we last left RadWebDesign in Chapter 4, they had just 

blown the corporate demo and lost RobotsRUs’s business. 

CorrectWebDesign was put in charge of the entire RobotsRUs 

site and got to work getting everything nailed down before the 

site launch later in the month. But you’ll also remember that 
RadWebDesign decided to bone up on their HTML and CSS. 

They decided to rework the RobotsRUs site on their own, using 
proper HTML and stylesheets, just to get some experience 
under their belt before they took on another consulting job. 


As fate would have it, just before RobotsRUs’s big site launch, 
it happened again: RobotsRUs called CorrectWebDesign 

with an urgent message. “We’re changing our corporate look 

and we need all the colors, backgrounds, and fonts changed on 

our site.” At this point, the site consisted of almost 100 pages, so 
CorrectWebDesign responded that it would take them a few days 
to rework the site. “We don’t have a few days!” the CEO said. 
Desperate, the CEO decided to call in RadWebDesign for help. 
“You flubbed up the demo last month, but we really need your help. 
Can you help the CorrectWebDesign guys convert the site over to 
the new look and feel?” RadWebDesign said they could do better 
than that; in fact, they could deliver the entire site to them in less 
than an hour. 


How did RadWebDesign go from disgrace to web page 
superheroes? What allowed them to change the look and 
feel of 100 pages faster than a speeding bullet? 
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Uh, I think you forgot 
to style the elixirs and 
directions pages? 


Getting the lounge style into the 
elixirs and directions pages 


It’s great that we’ve added all this style to “lounge.html”, but what 
about “elixir.html” and “directions.html”? They need to have a look 
that is consistent with the main page. Easy enough...just copy the style 
element and all the rules into each file, right? Not so_fast. If you did that, 
then whenever you needed to change the style of the site, you’d have to 
change every single file—not what you want. But luckily, there is a better 
way. Here’s what you’re going to do: 


(1) Take the rules in “lounge.html” and place 
them in a file called “lounge.css”. 
Create an external link to this file from 


your “lounge.html” file. 


and “directions. html’. 


(3) Create the same external links in “elixir.html’” 


Give all three files a good test drive. 
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Creating the “lounge.css” file 


You’re going to create a file called “lounge.css” to contain the style rules 
for all your Head First Lounge pages. To do that, create a new text file 
named “lounge.css” in your text editor. 


Create ori tss” in 
i the “lounge folder 


lounge.css 


We often call CSS 


ae { (Lhe root folder). 
a lounge. om aN 
— Files “stylesheets.” 


3 eal 
i reen.jpg: °°” 
-_ f [eon _ [4 : : | spi 
| | . dink git rr inal 
directions.html elixir.html “2 , 
red.jpg lightblue.jpg 
Now type, or copy and paste from your “lounge.html” file, the CSS rules 
into the “lounge.css” file. Delete the rules from your “lounge.html” file 
while you're at it. 
Note that you should not copy the <style> and </style> tags because 
the “lounge.css” file contains only CSS, not HTML. 
hl, h2 { 
font-family: sans-serif; KOS 
color: gray; Your “lounge. ess” file 
} should look like this. 
Remember, no <style> tags! 
hl { 
border-bottom: lpx solid black; 
} 
p { 
color: maroon; 
} 
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Linking from “lounge.html” to the external stylesheet 


Now we need a way to tell the browser that it should style this page with the 
styles in the external stylesheet. We can do that with the HTML <1link> 
element. Here’s how you use the <1link> element in your HTML: 


<!doctype html> 
<html> 
<head> 

<meta charset="utf-8"> 
<title>Head First Lounge</title> 
<link type="text/css" rel="stylesheet" href="lounge.css"> 
<style> 
<styte> 


Here’s the HTML that links 
—, to the external stylesheet: 


Se You don’t need the <style> element 
</head> anymore—just delete it. 
<body> 
<hl>Welcome to the Head First Lounge</h1> 
<p> 
<img src="drinks.gif" alt="Drinks"> 
</p> 


KS The vest of the HTML is the same. 


</p> 
</body> 
</html> 


HTML Up Clase 


Let’s take a closer look at the <1ink> element since you haven’t seen it before: 


vy element The type of this information is “text/ess’”— 
Use the eed in other words, a CSS stylesheet. As of And the stylesheet is located at 
to link i ae HTMLS, You don’t need this anymore (it’s this href Cin this case, we're using 
informa! optional), but you may see it on older pages. a relative link, but it could be a 


full-blown URL). 
\ g Z 


<link type="text/css" rel="stylesheet" href="lounge.css"> 


The rel attribute specifies the relationship between the 
HTML file and the thing you're linking, to. We're linking to 
a stylesheet, so we use the value “stylesheet”. 


<link> is Q Voi 


d elem 
It has no Clos e sas 


ing tag, 
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Linking from “elixir.html” and “directions. html” 
to the external stylesheet 


Now youre going to link the “elixir.html” and “directions. html!” files just 

as you did with “lounge.htm!”. The only thing you need to remember is 
that “elixir.html” is in the “beverages” folder, and “directions.html” is in the 
“about” folder, so they both need to use the relative path “../lounge.css”. 


So, all you need to do 1s add the following <1ink> element to both files: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Head First Lounge Elixirs</title> 
<link type="text/css" rel="stylesheet" href="../lounge.css"> 


</head> 
KR This is “elixiv-html”. Just add the <link> line. 


<body> 


</body> 
</html> 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Head First Lounge Directions</title> 
<link type="text/css" rel="stylesheet" href=". ./lounge.css"> 


</head> 


<body> 


Same for “directions. html”. Add the <link> line here. 
</body> 
</html> 
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Test driving the entire lounge... 


Save each of these files and then open 
“lounge.html” with the browser. You should 
see no changes in its style, even though the 
styles are now coming from an external file. 
Now click on the “elixirs” and “detailed 
directions” links. 


x. To} Ty) 3 fe crawer inner nee 800 Pr 


| Our Elixirs 


Green Tea Cooler 


Wow! We have a whole new style for the 
Elixirs and Directions pages with only a one- 
line change to the HTML in each file! Now you 
can really see the power of CSS. 


4° = hock MD of vitae and cobvevals, chiki lr erirvvicies tee tenehda feel beveefie caf 
poe wih a pele of chen: bw end ginger mcd. 


Rasoberry toe Concentration 


| init Lownge 
mo & > Mie: 4 }onaaet 7 /eergariournge Atel , 


Welcome to the Head First Lounge 


Wren 


Join ws any evening for refesting Shun, anvenaton sod maybe » pene or teu of 
Dasce Dasce Revedvaion. Wieekia access ik deewys prrvekded; BYOWS (Brtey your 
OWS Seb server) 


Directions 


‘Yine'l Deal us right ie the comer of Gow swn Webwile. If yoo need help finding a, 
check ou oer desaiied dimetions Came jen us! 


ombning maghoy etn MO Ge SS peal werd ree. se ice 
preonaeniamitiny Eero 


orry Bliss Elixir 


Directions 


Take tre 305 Senko Wold «go a ml 
Cacti o9 368 © good ml 
bia Thm Son & Saco Ae Nendo 
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you are here > 277 


www.it-ebooks.info 


use css for flexibilit 


278 


Five-Minute 


Mystery 


The Case of Brute Force Versus Style 


So, how did RadWebDesign become web page superheroes? 
Or maybe we should first ask how the “do no wrong” 
CorrectWebDesign firm flubbed things up this time? The 
root of the problem was that CorrectWebDesign was creating 
the RobotsRUs pages using circa-1998 techniques. They 
were putting their style rules right in with their 

HTML (copying and pasting them each time), 

and, even worse, they were using a lot of old 

HTML elements like <font> and <center> 

that have now been deprecated (eliminated 
from HTML). So, when the call came to change 
the look and feel, that meant going into every web 
page and making changes to the CSS. Worse, it meant 
going through the HTML to change elements as well. 


Compare that with what RadWebDesign did: they used 
HTMLS, so they had no old presentation HTML in their 
pages, and they used an external stylesheet. The result? To 
change the style of the entire site, all they had to do was 
go into their external stylesheet and make a few changes to 
the CSS, which they easily did in minutes, not days. They 
even had time to try out multiple designs and have three 
different versions of the CSS ready for review before the site 
launch. Amazed, the RobotsRUs CEO not only promised 
RadWebDesign more business, but he also promised them 
the first robot that comes off the assembly line. 
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Now that you’ve got one external style file (or “stylesheet”), use it to change all the 
paragraph fonts to “sans-serif” to match the headings. Remember, the property to 
change the font style is “font-family”, and the value for sans-serif font is “sans-serif”. 
You'll find the answer on the next page. 


— 
i naa — 
a6 fc f+! ae haa la earepaouiga Ale 


The headings use sans—serif ea 7 Welcome to the Head First Lounge 


which don’t have sevifs and have a 
srel 


very Clean look. 
; Join usa cvring sewer . = 
The paragraphs still use the——> seep ran em i TT  — 
default serit fonts, which owe web Server — es 


have serifs, and ave often a Our Elixirs 
tonsidered more difficult to paeerens 


read on a Computer screen. 


Yr Nal usrgoe ia | Sten Tea Cooter 


check en oer depaiiod 


Ld ‘Chuck Pall of ren ed reread, le oh corse che ei | eo 
PRES Sh eid ee ee pg 


Aaspbery loo Conoentration 


————- 
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understanding inheritance 


Now that you've got one external style file (or “stylesheet”), use it to change 
all the paragraph fonts to “sans-serif” to match the headings. Remember, the 
property to change the font style is “font-family”, and the value for sans-serif 
font is “sans-serif”. Here’s our solution. 


h2 { 
font-family: sans-serif; 
color: gray; 


border-bottom: lpx solid black; 


font-family: sans-serif; _—— Just add a font—family property 
color: maroon; to Your paragraph rule in the 
“lounge-css” file. 


I'm wondering if that is really the best 
solution. Why are we specifying the font-family 
for EACH element? What if someone added a 
<blockquote> to the page—would we have to then 
add a rule for that too? Can't we just tell the 
whole page to be sans-serif? 


www.it-ebooks.info 


getting started with css 


It’s time to talk about your inheritance... 


Did you notice when you added the font-family 
property to your p selector that it also affected the pore 5 
font family of the elements inside the <p> element? tee Eo at ee 
Let’s take a closer look: 


i anaeitalovnda i 


20 Baler amen | itil Dios 5 


Welcome to the Head First Lounge 


1 | = 
& 


When ie added the 


font- ‘amily property to Your dob ue ary deireing by plraiesg gin silo min 
CSS v oe ss wi . ot ——— Wins Cc ad ey oe BOS: 
the font amily ox your <? sh 


elements. But it also changed 


the font family of the two links Toe End ge ight iy the ine ct coer Wee, Feed hip Ered 


and the emphasized text. DS gsi us Capra foley! 


The elements inside the <p> element inherit the 


Direcl|/Arne 


i style is 
font-family style from <p> eae sae 
Just like you can inherit your blue eyes or brown hair from your parents, elements can ica dee a ly. 
inherit styles from their parents. In this case, the <a> and <em> elements inherited the ; 


font-family style from the <p> element, which is their parent element. It makes sense 
that changing your paragraph style would change the style of the elements in the paragraph, 
doesn’t it? After all, if it didn’t, you’d have to go in and add CSS rules for every inline 

element in every paragraph in your whole site...which would definitely be so NOT fun. 


eared and time-consuming 
Let’s take a look at the HTML tree to see how inheritance works: 


ot to mention) 
a 


error—Prone, tedious, 


If we set the font—family of all the <p> elements, 
here ave all the elements that would be affected. 


The <P> elements, of Course, would 


with the font—Family- The <a>, <em>, and <a> 
ms she ag elements in the two 
paragraphs inherit. the 
font—family from their 
parent elements, the 


The <img> element is <p> elements. 


a child of a paragraph, 

but it doesn’t have ——1 
any text, so it’s not 
affected. 
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moving rules to the body element 


What if we move the font up the family tree? 


If most elements inherit the font-family property, what if we move it up to 

the <body> element? That should have the effect of changing the font for all 

the <body> element’s children, and children’s children. fonte family 
We've acing to move the . ee 
property rom the paragra? 


ee headings to the body: 


Now all these elements are going 
1 to inherit the font—family. 


Ye so are their children. 


images don’t 

have text. 
Wow, this is powerful. Simply by changing the 
font-family property in the body rule, we 
tould change the font for an entire site. 


What are you waiting for...give it a try 


Open your “lounge.css” file and add a new rule that selects the <body> element. 
Then remove the font-family properties from the headings and paragraph 
rules, because you’re not going to need them anymore. 
Here’s what you're going to do. 

body First, add a new rule that selects 

font-family: sans-serif; <2— the <body> element. Then add the 
font—Lamily ped with a value 

hl, h2 { of sans-serit. 


color: gray; \ 
} 
Then, take the font—family 


} 


a : property out of the hi, h2 
border-bottom: lpx solid black; cole as well aethe P wake 
} ? : 
Pp { 
color: maroon; 
} 
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getting started with css 


Test drive your new CSS 


As usual, go ahead and make these changes in the “lounge.css” 
stylesheet, save, and reload the “lounge.html” page. You shouldn’t 
expect any changes, because the style is the same. It’s just coming 
from a different rule. But you should feel better about your CSS, 


because now you can add new elements to your pages and they'll 
automatically inherit the sans-serif font. 


are: act ng : Haid Fire Loong \ 
Surprise, surprise. This doesn't look any Welcome to the Head First Lounge 
different at all, but that is exactly what we 
were expectin ; isn’t it? All you ve done is move if 
the sans—serit font up into the body rule and Tr 'z | 


inherit that. 
let all the other elements inhe it t t itr i ry neirting I plhesg gle Soreein and Furs & gare oF 
foo! Gave Gaus A ea Wie ce i ey oe PAS 
NS (inn your fan web cary) 
Directions 


Tow End ge nighiin te cain o) aoe Wares. fond belo Erin 
Us, Chai, peel par chanel ied cioections. Corres iri ee! 


Okay, so now that the whole site is set 
to sans-serif with the body selector, what 
if I want one element to be a different 
font? Do I have to take the font-family 
out of the body and add rules for every 
element separately again? 
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when you don’t want to inherit 


Overriding inheritance 


By moving the font-family property up into the body, you've set that 
font style for the entire page. But what if you don’t want the sans-serif 
font on every element? For instance, you could decide that you want <em> 
elements to use the serif font instead. 


But You ve decided 
elements to have th 
instead. You need 


The Lont—family property is set P 
in the body rule, so every elemen 
inside the body inherits the : 
cans—serit. font—Lamily proper’ 


from <body>- 


You want our m. 
€ serif fot toa, 
to override the 


inheritance with a CSS vule. 


Well, then you can override the inheritance by supplying a 
specific rule just for <em>. Here’s how you add a rule for <em> 
to override the font-family specified in the body: 


To override the font—family property 


le 
inherited from body, add a new ru 
sisting em with the font—family 
property value set to serif. 


body { 
font-family: sans-serif; 
} 
hl, h2 { 
color: gray; 
} 
hl { 
border-bottom: lpx solid black; 
} 
P { 
color: maroon; 
} 
em { 
font-family: serif; 
} 
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Test drive 


Add a rule for the <em> element to your CSS with a 
font-family property value of serif, and reload 


your “lounge.html” page: 


Notice that the “Dance Dance 
Revolution” text, which is the 
text in the <em> element, is 
now a serif font. 


AA 


la fet 


Directions 


fe 
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Brad Per [oatge 


cSt Tere oe ed 


Welcome to the Head First Lounge 


Viel 


Zon ug any oepning lor eefhesh ing gla convoreaion and maybe a game or 
ha Of Quoc Door Arvodrios. WAGE ano te Say Droid: BY OES 


(Bring (9) can wot sore). 


Foul fied ua right the center of downitewn Webatin 7 you need hetp Ending 
U8, heck cal cur eed die chesy ieee poi ie 


As a general rule, it’s not a good idea to change 


fonts in the middle of a paragraph like this, so go 


ahead and change your CSS back to the way it was 


(without the em rule) when you’re done testing. 


Q: How does the browser know which 
rule to apply to <em> when I’m overriding 
the inherited value? 


A: With CSS, the most specific rule 

is always used. So, if you have a rule for 
<body>, and a more specific rule for <em> 
elements, it is going to use the more specific 
rule. We'll talk more later about how you 
know which rules are most specific. 


6 How do | know which CSS 
properties are inherited and which are 
not? 


A: This is where a good reference really 
comes in handy, like O’Reilly’s CSS Pocket 
Reference. In general, all of the styles that 
affect the way your text looks, such as font 
color (the color property), the font-family, 

as you've just seen, and other font-related 
properties such as font-size, font-weight (for 
bold text), and font-style (for italics) are 


there,are no 
Dumb Questions 


inherited. Other properties, such as border, 
are not inherited, which makes sense, right? 
Just because you want a border on your 
<body> element doesn’t mean you want it 
on ail your elements. A lot of the time, you 
can follow your common sense (or just try 

it and see), and you'll get the hang of it as 
you become more familiar with the various 
properties and what they do. 


Q: Can | always override a property 


that is being inherited when | don’t want 
it? 


> Yes. You can always use a more 


specific selector to override a property from 
a parent. 
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Q: This stuff gets complicated. Is there 


any way | can add comments to remind 
myself what the rules do? 


* Yes. To write a comment in your 


CSS, just enclose it between /* and */. For 
instance: 


/* this rule selects all 
paragraphs and colors them 
blue */ 


Notice that a comment can span multiple 
lines. You can also put comments around 
CSS and browsers will ignore it, like this: 
/* this rule will have no 
effect because it's ina 
comment 


p { color: blue; } */ 


Make sure you close your comments 
correctly; otherwise, your CSS won't work! 
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styling individual 


I was thinking it would be 
cool to have the text below 

each elixir match the color of 
the elixir. Can you do that? 


We’re not sure we agree with the 
aesthetics of that suggestion, but 
hey, you’re the customer. 


Can you style each of these paragraphs separately 

so that the color of the text matches the drink? The 
problem is that using a rule with a p selector applies the 
style to all <p> elements. So, how can you select these 
paragraphs individually? 


That’s where classes come in. Using both HTML and 
CSS, we can define a class of elements, and then apply 
styles to any element that belongs to that class. So, what 
exactly is a class? Think of it like a club—someone starts 
a “greentea” club, and by joining you agree to all the 
rights and responsibilities of the club, like adhering to 
their style standards. Anyway, let’s just create the class 
and you'll see how it works. 

Creating a class takes two steps: first, we add the = 
element to the class by adding a class attribute to the 

element in the HTML; second, we select that class in 

the CSS. Let’s step through that... J 


Green >] 
text 


Blue text > 


Purple text > 


Red text...ch, we 
don't need to | as 
change this one. 
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getting started css 
Adding an element to the greentea class 
Open up the “elixirhtml” file and locate the “Green Tea Cooler” paragraph. 
This is the text we want to change to green. All you’re going to do is add the <p> 
element to a class called greentea. Here’s how you do that: 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Head First Lounge Elixirs</title> 
<link type="text/css" rel="stylesheet" href="../lounge.css"> 
peg To add an clement to a class, just add 
<hl>Our Elixirs</hl> the attribute ‘class along with the 
<h2>Green Tea Cooler</h2> mame of the Class, like greentea : 
<p class="greentea"> 
<img src="../images/green.jpg" alt="Green Tea"> 
Chock full of vitamins and minerals, this elixir 
combines the healthful benefits of green tea with 
a twist of chamomile blossoms and ginger root. 
</p> 
<h2>Raspberry Ice Concentration</h2> 
<p> 
<img src="../images/lightblue.jpg" alt="Raspberry Ice"> 
Combining raspberry juice with lemon grass, 
citrus peel and rosehips, this icy drink 
will make your mind feel clear and crisp. 
</p> 
<h2>Blueberry Bliss Elixir</h2> 
<p> 
<img src="../images/blue.jpg" alt="Blueberry Bliss"> 
Blueberries and cherry essence mixed into a base 
of elderflower herb tea will put you in a relaxed 
state of bliss in no time. 
</p> 
<h2>Cranberry Antioxidant Blast</h2> 
<p> 
<img src="../images/red.jpg" alt="Cranberry Blast"> 
Wake up to the flavors of cranberry and hibiscus 
in this vitamin C rich elixir. 
</p> 
</body> 
</html> 
Now that the green tea paragraph belongs to the greentea class, you just need to 
provide some rules to style that class of elements. 
287 
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class selectors 


Creating a class selector 


To create a class in CSS and select an element in that class, you write a 
class selector, like this: 


Then use a “.” to 


specify a Class. Last is the 
class name. 
Select the { a ~ 
element in the ? p.greentea And here’ 
class first—in color: green; nd heve’s the le nade 


any text in a Paragraph 
in the greentea class the 
color green. 


this case, P- } 


The selector P-Sreentea 
selects all Paragraphs in 
the 9reentea Class. 


So now you have a way of selecting <p> elements that belong to a certain class to 
style them. All you need to do is add the class attribute to any <p> elements you 
want to be green, and this rule will be applied. Give it a try: open your “lounge.css” 
file and add the p. greentea class selector to it. 


body { 
font-family: sans-serif; 
} 
h1, h2 { 
color: gray; 
} 
hl { 
border-bottom: lpx solid black; 
} 
Pp { 
color: maroon; 
} 


P-.greentea { 
color: green; 


} 
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getting started with css 


A. greentea test drive 


Save and then reload to give your new class a test drive. 


: Seed HI Losey Makes : a, 


Aaa a $a 
ea acomars Foamy Gomer mga tei ui deme 
ana a $e 


Our Elixirs 


Green Tes Cooler 


Here's the new greentea 
class applied to the | 


paragraph. Now the font 
is green and matches the 
Green Tea Cooler. Maybe 
this styling wasnt suth a 
bad idea after all. 


& beck ud of wll and ieee, ee her coed Be: beeetihfiat bears Ice ol 
Greer ee eth he igo oherrcie Greer cred paige ei 


Raspberry lee Goncentrailan 


i@ 


Coerery feaptery pose ei oe pe tae peed eed oe Pe ey 
Gre a eg Qo i ee ch eed rie. 


Glaeberry Bliss Elixir 


|! A enaes aw eT, Pe Meee in bone oe eee er ee il! 
wa RCL cn ia] 


Cranberry Aniiaidant Glnel 


| = Vite op a ee Beco of oonbeery go be bie in ee ee rich aici 


Your turn: add two classes, “raspberry” and “blueberry’, to the correct 
paragraphs in “elixir.html’, and then write the styles to color the text blue and 
purple, respectively. The property value for raspberry is “blue” and for blueberry 
is “purple”. Put these at the bottom of your CSS file, under the greentea rule: 
raspberry first, and then blueberry. 


Yeah, we know you're probably thinking, how 

tan a raspberry be blue? Well, if Raspberry 

Kool-Aid is blue, that’s good enough for us. 

And seriously, when You blend up a bunch of 

blueberries, they really ave more purple than 
blue. Work with us here. 
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dealing with class selectors 


Taking classes further... 


You’ve already written one rule that uses the greentea class to change any 
paragraph in the class to the color “green”: 


p.greentea { 
color: green; 


} 
But what if you wanted to do the same to all <blockquote>s? 
Then you could do this: 
blockquote.greentea, p.greentea { Just add another selector to handle 


color: green; 


<blotkquote>s that are in the greentea 

al class. Now this rule will apply to <p> 
and <blockquote> elements in the 
greentea Class. 


} 


And in your HTML you'd write: 


<blockquote class="greentea"> 


So what if I want to 
add <h1>, <h2>, <h3>, <p>, and 
<blockquote> to the greentea 
class? Do I have to write one 
huge selector? 


No, there’s a better way. If you want all 
elements that are in the greentea class to 
have a style, then you can just write your 
rule like this: 


-greentea { 
color: green; 


} 


If you leave out all the element names, 
and just use a period followed by a class 
name, then the rule will apply to all 
members of the Class. 
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getting started with css 


Cool! Yes, that works. One 
more question...you said being in 
a class is like being ina club. Well, 
I can join many clubs. So, can an 
element be in more than one class? 


Yes, elements can be in more than one class. 


It’s easy to put an element into more than one class. Say 
you want to specify a <p> element that is in the greentea, 

raspberry, and blueberry classes. Here’s how you would 
do that in the opening tag: 


Place each class 
name in he 


mm value of the class 


<p class="greentea raspberry blueberry"> atbribute, with a 
space in between 
eath. The ordering 
doesn't matter 


So, for example, I 
could put an <h1> into my “products” 
class that defines a font size and 
weight, and also a “specials” class 
to change its color to red when 
something's on sale? 


Exactly. Use multiple classes when you want 

an element to have styles you’ve defined in 
different classes. In this case, all your <h1> 
elements associated with products have a 
certain style, but not all your products are on 
sale at the same time. By putting your “specials’ 
color in a separate class, you can simply add i 
only those elements associated with products on ; | 


sale to the “specials” class to add the red color Se 


you want. 


{ } 
2 | ; i 
| 


Now you may be wondering what happens when an element belongs 

to multiple classes, all of which define the same property—like our <p> 
element up there. How do you know which style gets applied? You know 
each of these classes has a definition for the color property. So, will the 
paragraph be green, blue (raspberry), or purple? 


We’re going to talk about this in great detail after you’ve learned a bit 
more CSS, but on the next page you’ll find a quick guide to hold you over. 
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guide to 


The world’s smallest and fastest guide to 
how styles are applied 


Elements and document trees and style rules and classes...it can get downright confusing. 
How does all this stuff come together so that you know which styles are being applied to 
which elements? As we said, to fully answer that you’re going to have to know a little more 
about CSS, and you'll be learning that in the next few chapters. But before you get there, 
let’s just walk through some common-sense rules of thumb about how styles are applied. 


First, do any selectors select your element? 


Let’s say you want to know the font-family property value for an element. The first thing 
to check is: is there a selector in your CSS file that selects your element? If there is, and it 
has a font-family property and value, then that’s the value for your element. 


What about inheritance? 


If there are no selectors that match your element, then you rely on inheritance. So, look at 
the element’s parents, and parents’ parents, and so on, until you find the property defined. 
When and if you find it, that’s the value. 


Struck out again? Then use the default 


If your element doesn’t inherit the value from any of its ancestors, then you use the default 
value defined by the browser. In reality, this is a little more complicated than we’re describing 
here, but we’ll get to some of those details later in the book. 


What if multiple selectors select an element? 


Ah, this is the case we have with the paragraph that belongs to all three classes: 


<p class="greentea raspberry blueberry"> 


There are multiple selectors that match this element and define the same color property. 
That’s what we call a conflict. Which rule breaks the tie? Well, if one rule is more specific than 
the others, then it wins. But what does “more specific” mean? We’ll come back in a later 
chapter and see exactly how to determine how specific a selector is, but for now, let’s look at 
some rules and get a feel for it: 
Here’s a rule that selects any 
old paragraph element. 

This rule selects members of the greentea 
.greentea { color: green; } e class. That's a little more specific. 

And this rule selects only paragraphs that are in 

p.greentea { color: green; } wa the greentea ¢lass, so that’s even more specific. 


p { color: black; } 


: . These rules also select only paragraphs in a 
p.raspberry { color: blue; } Y Paragrap 

xe particular class. So they are about the same 
} 


p.blueberry { color: purple; in specificity as the p-greentea rule. 
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And if we still don’t have a clear winner? 


So, if you had an element that belonged only to the greentea class, there 
would be an obvious winner: the p.greentea selector is the most specific, 
so the text would be green. But you have an element that belongs to all 

three classes: greentea, raspberry, and blueberry. So, p.greentea, 
p.raspberry, and p.blueberry all select the element, and are of equal 
specificity. What do you do now? You choose the one that is listed ast in 

the CSS file. If you can’t resolve a conflict because two selectors are equally 
specific, you use the ordering of the rules in your stylesheet file; that is, you 
use the rule listed last in the CSS file (nearest the bottom). And in this case, 
that would be the p.blueberry rule. 


In your “elixir.html” file, change the greentea paragraph to include all the classes, like this: 


<p class="greentea raspberry blueberry"> 

Save and reload. What color is the Green Tea Cooler paragraph now? 

Next, reorder the classes in your HTML: 

<p class="raspberry blueberry greentea"> 

Save and reload. What color is the Green Tea Cooler paragraph now? 

Next, open your CSS file and move the p.greentea rule to the bottom of the file. 
Save and reload. What color is the Green Tea Cooler paragraph now? 

Finally, move the p.raspberry rule to the bottom of the file. 

Save and reload. What color is the Green Tea Cooler paragraph now? 

After you've finished, rewrite the green tea element to look like it did originally: 
<p class="greentea"> 


Save and reload. What color is the Green Tea Cooler paragraph now? 
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language comparison: css and html 


Fireside Chats 


CSS: 


Did you see that? P?m like Houdini! I broke right 
out of your <style> element and into my own file. 
And you said in Chapter | that Pd never escape. 


Have to link me in? Come on; you know your pages 
wouldn’t cut it without my styling. 


If you were paying attention in this chapter, you 
would have seen ’m downright powerful in what I 
can do. 


Well now, that’s a little better. I like the new attitude. 
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Tonight’s talk: CSS & HTML compare languages 


HTML: 


Don’t get all excited; I still have to link you in for 
you to be at all useful. 


Here we go again...while me and all my elements 
are trying to keep things structured, you’re talking 
about hair highlights and nail color. 


Okay, okay, I admit it; using CSS sure makes my 
job easier. All those old deprecated styling elements 
were a pain in my side. I do like the fact that my 
elements can be styled without inserting a bunch 
of stuff in the HTML, other than maybe an 
occasional class attribute. 


But I still haven’t forgotten how you mocked my 
syntax...<remember>? 
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CSS: 


You have to admit HTML is kinda clunky, but 
that’s what you get when you’re related to an early 
°90s technology. 


Are you kidding? I’m very expressive. I can select 
just the elements I want, and then describe exactly 
how I want them styled. And you've only just 
begun to see all the cool styling I can do. 


Yup; just wait and see. I can style fonts and text in 
all kinds of interesting ways. I can even control 
how each element manages the space around it on 
the page. 


Bwahahaha. And you thought you had me 
controlled between your <style> tags. You’re 
going to see I can make your elements sit, bark, 
and roll over if I want to. 


getting started css 


HTML: 


I call it standing the test of time. And you think 
CSS is elegant? I mean, you’re just a bunch of rules. 
How’s that a language? 


Oh yeah? 


Hmmm...sounds as if you have a little too much 
power; I’m not sure I like the sound of that. After 
all, my elements want to have some control over 
their own lives. 


Whoa now! Security...security?! 
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testing your inheritance skills 


Who gets the inheritance? 


Exercise Sniff, sniff; the <body> element has gone to that great browser in the sky. But he left 

: behind a lot of descendants and a big inheritance of color “green”. Below, you'll find his 
family tree. Mark all the descendants that inherit the <body> element’s color green. Don't 
forget to look at the CSS below first. 


h 


iE 


| | | P| 
L~ Here's the CSS. Use this to 
color: green; determine which of the above 


elements hit the jackpot and 
get the green (color). 


body { 


color: black; 
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\f You have errors in Your CSS, 
usually what happens is all the rules 
below the error are ignored. So, 
get in the habit of looking, for 


errors now, by doing, this exercise. 


getting started with css 


BE the Browser 

Below, you']] find the CSS file “style. 
ess”, with some errors in it. Your job 
is to play like you're the browser 

and locate al] the errors. 
After you've done the 
exercise, look at the end 


of the chapter to see if 
you caught al] the errors. 


The file _, 


<style> 


body { 
background-color: white 


hl, { 


gray; 
font-family: sans-serif; 


} 


h2, p { 
color: 


} 


<em> { 
font-style: italic; 
} 


</style> 
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validating css 


The exercise got me 
thinking...is there a way 

to validate CSS like there is 
with HTML? 


Of course! 


Those W3C boys and girls aren’t just sitting 
around on their butts, they’ve been working hard. 
You can find their CSS validator at: 


http: //jigsaw.w3.org/css-validator/ 


Type that URL in your browser, and we think 


v you'll feel quite at home when you get there. 
" Yow’re going to find a validator that works almost 
exactly like the HTML 
yk validator. To use the CSS ‘anes ; 
=| version, Just point the haces i 
e validator to your CSS 
URL, upload a file with 
your CSS in it (first tab), PUP Pie ay oad Gill 
or just paste it into the ‘Woigabe by UA 
form (second tab), and ES Ae emcee oe ne a 
submit. ae 


© ere Oia 


You shouldn’t encounter 
any big surprises, like 
needing doctypes or hvac seal Tan WS andkdadcrn rady aoc a 
character encodings with : 
CSS. Go ahead, give it a pi ieteetrnaaak 

try (like we’re not going sheuk feu ohne Inaba eevee eee 


Cersin eal hen we baufid baller inode low 2 tepaigy a | 


PwaH anancan " 
TAL pis urbe bi wins FA COW, sescucrie, yay 


to make you do it on the 


Axel Shomeewme Dyvriied Faadaact Credo 
next page, anyway). “r, ay aia 
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Making sure the lounge CSS validates 


Before you wrap up this chapter, wouldn’t you feel a lot better if all that Head First 
Lounge CSS validated? Sure, you would. Use whichever method you want to get 
your CSS to the W3C. If you have your CSS on a server, type your URL into the 
form; otherwise, either upload your CSS file or just copy and paste the CSS into 
the form. (If you upload, make sure you’re directing the form to your CSS file, not 
your HTML file.) Once you’ve done that, click on Check. 


Bit ir ree 
es ee er : 


Yay! Our CSS validates as 
CSS 2.1 (the validator hasn't 
wpsraded to CSS 3 yet, but = 
it it has by the time you read 


Pha WA i265 Volltiton Banvnn 


getting started with css 


If your CSS didn't validate, check 
it with the CSS a few pages back 
and find any small mistakes you ve 
made, then resubmit. 


— ee 


ie = 


this, it should still validate). caret WAC CSS Usliator reais for sangn cnt’ (becneed es 


Frei Sacha bic i A ied By 


Forahe pret reaatary choy 
Fee a DEY Eas oe ic mete ds irioepriaks 
Ps eet vento. een a ae WR she ce Ao mar en nape ar nny ech os ry 


. t | 
Here are some icons You Can pu : 
on Your web page if You want to —— 2 fos 
show off that your CSS validates. Ana 
(You ean get similar i¢ons tor ao 
validated HTML, too.) 


ma Lee na 
aT Svelacbu wipe teetghes : 
= ' 3 - 
CU sh erg eee itrier lina pepr rere” 


CaP 


wpa 
AE =m cha ly Thee 
Sit ing eLpiae ek Hees Herwig tt ig ttt tt eh eee 
Brosh Tega dpa BSL EE 
SDe Aa OAg Te Oe Le bee ewe 


( Just like when you validate HTML 
correctly, you get the “green badge 
of suecess” when You pass validation 
for Your CSS. Green is good! 


there are no o 
Dumb Questions 


Q: Do I need to worry if | get 
warnings? Or do what they say? 


A: It's good to look them over, but you'll 
find some are more in the category of 

suggestions than “must do’s.” The validator 
can err on the side of being a little anal, so 


just keep that in mind. 
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getting a feel for some css properties 


Proper eae 
Controls the Use this property to align 
position of the — a text to the left, 
'@) i ag center, or right. 
element. 


tetter-spacing 


This lets you set the spacing between 
letters. Like this. 


Use tolor to set the font 
color of text: elements background-color 
color : ty controls the : 
G S Licious) ne an element: Use this property for 
ss) itali¢ or oblique text. 
tyols SS cyt] 
Tris pore oe ise nt“ F 
are aaah! (~ border aa 
b ” * This pr. et: This property lets 
46 Prope Y puts a bord Property : 
i coor clement. You tan have pe haa ee a ehanse hee ie 
ridged border, a dotted border... ° ep leah ied Ie 
Plex: . yast- style 
This is how ied tell ts If you need space 
element how to Position ing between the edge of 
its left side. padd 3 an element and its 
This property sets the content, use padding. Use this property to 
space between lines in a heat put an image behind 
Te dene yaoi Tee 
bigger Le) 
Ly V a” 


CSS has a Iot of style properties. 

You'll see quite a few of these in 

the rest of this book, but have a 
quick look now to get an idea 


of all the aspects of style 
you can control with CSS. 
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getting started 


It looks like you're getting 
the hang of this style stuff. 
We're looking forward to seeing 
what you come up with in the next 
couple of chapters. 


css 


al POINTS 


CSS contains simple statements, called rules. 


™ Each rule provides the style for a selection of HTML 
elements. 


= Atypical rule consists of a selector along with one or 
more properties and values. 


= ~The selector specifies which elements the rule 
applies to. 


= Each property declaration ends with a semicolon. 


= All properties and values in a rule go between { } 
braces. 


= You can select any element using its name as the 
selector. 


= By separating element names with commas, you can 
select multiple elements at once. 


= One of the easiest ways to include a style in HTML is 
the <style> tag. 


= For HTML and for sites of any complexity, you should 
link to an external stylesheet. 


The <link> element is used to include an external 
stylesheet. 


Many properties are inherited. For instance, if 
a property that is inherited is set for the <body> 
element, all the <body>’s child elements will inherit it. 


You can always override properties that are inherited 
by creating a more specific rule for the element you'd 
like to change. 


Use the class attribute to add elements to a class. 


on 


Use a “.” between the element name and the class 
name to select a specific element in that class. 


Use “classname” to select any elements that belong 
to the class. 


You can specify that an element belongs to more 
than one class by placing multiple class names in the 
Class attribute with spaces between the names. 


You can validate your CSS using the W3C validator, 
at http://jigsaw.w3.org/css-validator. 
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time for some mental pushups 


RR HTMLecross 


Here are some clues with mental twist and turns that will help you burn 
alternative routes to CSS right into your brain! 


Across 

3. Styles are defined in these. 

5. Selects an element. 

8. Each rule defines a set of properties and 


10. Defines a group of elements. 

11. Property that represents font color. 

13. Ornamental part of some fonts. 

14. How elements get properties from their parents. 
15. Property for font type. 
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Pt Er Ty | 
Zane 
Vite wees 
er 
Zane 


Down 

1. Fonts without serifs. 

2. You can place your CSS inside these tags in an 
HTML file. 

4. An external style file is called this. 

6. With inheritance, a property set on one element is 
also passed down to its : 

7. Won this time because they used external 
stylesheets. 

9. They really wanted some style. 

12. Use this element to include an external stylesheet. 
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Like this 


Markup Magnets Solution 


1 Remember drawing the hierarchy diagram of HTML elements 
in Chapter 3? You did that again for the Lounge’s main page. 
Here’s our solution. 


Solution The selected elements are colored: 


p, h2 { 


font-family: sans-serif; 


p, em { 


font-family: sans-serif; 
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304 


Your turn: add two classes, “raspberry” and “blueberry” to the 
correct paragraphs in “elixir.html” and then write the styles 
to color the text blue and purple, respectively. The property 
value for raspberry is “blue” and for blueberry is “purple”. 


body { 
font-family: sans-serif; 
} 
hl, h2 { 
color: gray; 
} 
hl { 
border-bottom: lpx solid black; 
} 
{ are. Hegel Sed Lote ge Doers 
Pp J - op = ee ee ee 
color: maroon; a —E 
} Our Elixirs 
p.greentea { Green Tea Co@lar 


color: green; 


If 
Pp. raspberry { . (Gre pe ot cfvelarte end eterna, on co -cobrant Sn Anethia! Gereria ol 


a a a chs be ae EE at 
color: blue; _ ; — 


} Aaspaberry ice Concaninalian 


p.blueberry { 
color: purple; FI 


} Como inc g Guphay juaoo ach msn Grae, cian ceed end rome bree Bun cp 
debs atl mules poor ed Bel cen aed olen 


Blucberry Biss Exile 


ae FSA BE oy ee ee eee 
falas wi laid be Oo eb ra ee 


Grnbeny Antloxidant Blast 


(Mle up he thea feed of ceded Det) dite fea i Be ere 0 eth ad ee 
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getting started css 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Head First Lounge Elixirs</title> 
<link type="text/css" rel="stylesheet" href="../lounge.css"> 
</head> 
<body> 
<hl>Our Elixirs</h1> 
<h2>Green Tea Cooler</h2> 
<p class="greentea"> 


<img src="../images/green.jpg" alt="Green Tea"> 
Chock full of vitamins and minerals, this elixir 
combines the healthful benefits of green tea with 
a twist of chamomile blossoms and ginger root. 

</p> 

<h2>Raspberry Ice Concentration</h2> 

<p class="raspberry"> 


<img src="../images/lightblue.jpg" alt="Raspberry Ice"> 
Combining raspberry juice with lemon grass, 
citrus peel and rosehips, this icy drink 
will make your mind feel clear and crisp. 

</p> 

<h2>Blueberry Bliss Elixir</h2> 

<p class="blueberry"> 
<img src="../images/blue.jpg" alt="Blueberry Bliss"> 
Blueberries and cherry essence mixed into a base 


of elderflower herb tea will put you in a relaxed 
state of bliss in no time. 


</p> 
<h2>Cranberry Antioxidant Blast</h2> 
<p> 
<img src="../images/red.jpg" alt="Cranberry Blast"> 
Wake up to the flavors of cranberry and hibiscus 
in this vitamin C rich elixir. 
</p> 
</body> 
</html> 
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exercise solutions 


Who gets the inheritance? 


Sniff, sniff; the <body> element has gone to that 
great browser in the sky. But he left behind a lot of 
descendants and a big inheritance of color “green”. 
Below, you'll find his family tree. Mark all the 
descendants that inherit the <body> element's color 


green. Don't forget to look at the CSS below first. 
Here’s our solution: 


hl and h2 get the inheritance 
because they don t have a color 
property, so they inherit gai 
tolor from body- Lucky them! 


/ “tian 


This one em is fortunate to 7 
a child of h2, which inherits 


the body color. Since there’s 
no em rule overriding the color 


with its own Property, this em 
inherits body's color. 


Unfortunately for these em 
elements, they are children 
of parents that override the 
body color, the p element. 
So they don't get any color 
inheritance from body. 


body { ‘ 
y color: green; 


} 


pf color: black; 


} 


There are no CSS 
rules £, 
blockquote, so blockouote also 
inherits its Color rom bod (B t 
ince P overrides the éoloy l, black 


the blockquote a won't matter.) 


ts are 
d these poor a elemen 
He children of Pp so they don't 
inherit the body tolor either. 
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img, is a thild of P) So img, 

doesn’t inherit. the color from 
body. imd, wouldn't get a olor 
inheritance anyway (poor guy). 
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BE the Browser elution 
Below, you']] find the CSS file with 

Some errors in it. Your job was to 

iad like you're the browser and 

locate all the errors. 

Did you find them al]? 


css! The 
i * No HTML in ye TML aa don't 


tule> tags are 
<style> mania : - 6S stylesheet. 


body { Zz Missing, semicolon 


background-color: white 
>_——— Missing } 
Extra Comma —hiy { 
Missing, property name — A gray; 


and: Colon font-family: sans-serif; 


h2, p { ‘a Missing property value and semicolon 
color: 


pe ee, Using, the HTML tag instead of just the 


<em> { element name. This should be em. 


} 


font-style: italic; 


No </ style> tags needed 


</stylex<~ "te CSS 
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exercise solutions 


In your “elixir.html” file, change the greentea paragraph to include all the classes, 
like this: 
It's purple because 
<p class="greentea raspberry blueberry"> the blueberry vule is 
a last in the CSS file. 
Save and reload. What color is the Green Tea Cooler paragraph now? purple 


Next, reorder the classes in your HTML: 


. se 
<p class="raspberry blueberry greentea"> It's still purple betau 
Lhe ordering of the 
names in the Class 


j ) urple : 
Save and reload. What color is the Green Tea Cooler paragraph now’ eal cr huba doen athow: 


Next, open your CSS file and move the p.greentea rule to the bottom of the file. Now, it’s green, because 


le comes 
Save and reload. What color is the Green Tea Cooler paragraph now? aid nee file. 


Finally, move the p.raspberry rule to the bottom of the file. 


blue &—~ Now, it’s blue, because 
the raspberry rule comes 
last in the CSS file. 


Save and reload. What color is the Green Tea Cooler paragraph now? 


After you've finished, rewrite the green tea element to look like it did originally: 


<p class="greentea"> 


yw > Okay, now the <p> 
Save and reload. What color is the Green Tea Cooler paragraph now? green element only belongs 


to one Class, so we use 
the most specific rule, 
which is p-greentea- 
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RS HTMLeross Solution 


EB 
EE 


2) i) 2] Ole | S16 


aS LEAN’ 


epee NE Peels ee 


rR 
o dG 
Oo 
Oo 
G 
oO 
Oo 
Go 
El 
Cea 
go 
N 
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8 styling with fonts and colors 


a 
Expanding Your + 
« Vocabulary 


Your CSS language lessons are coming along nicely. You already 
have the basics of CSS down, and you know how to create CSS rules to select and specify 
the style of an element. Now it’s time to build your vocabulary, and that means picking up 
some new properties and learning what they can do for you. In this chapter we’re going 

to work through some of the most common properties that affect the display of text. To do 
that, you'll need to learn a few things about fonts and color. You’re going to see you don't 
have to be stuck with the fonts everyone else uses, or the clunky sizes and styles the 
browser uses as the defaults for paragraphs and headings. You’re also going to see there 


is a lot more to color than meets the eye. 
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common text 


Text and fonts from 30,000 feet Arial 


a ; Arial py 
ot of CSS properties are dedicated to helping you style your text. Using ack 
CSS, you can control font, style, color, and even the decorations that are put Com Ic Sa 
on your text, and we’re going to cover all these in this chapter. We’ll start by Co ns 
exploring the actual fonts that are used to display your pages. You’ve already Urier Ne 
seen the font-family property, and in this chapter you’re going to learn a Georg; w 
lot more about specifying fonts. a 
ne eee Haze Imnacr 

efore we dive 1n, let’s get the 30,000-foot view of some properties you can 


use to specify and change the look of your fonts. After that, we'll take the 
fonts one by one and learn the ins and outs of using each. 


Customize the fonts in your pages with the font-family property. 


Fonts can have a dramatic effect on your page designs. In CSS, fonts are 

divided into “font families” from which you can specify the fonts you’d Although we ll'seetn 3 bik 
like used in each element of your page. Only certain fonts are commonly 
installed on most computers, so you need to be careful in your font 
choices. In this chapter we’ll take you through everything you need to 
know to specify and make the best use of fonts. 


how You Can expand the fonts 
available to your browser. 


body { 
font-family: Verdana, Geneva, Arial, sans-serif; 


—— 


} 


Control the size of your fonts with the font-size property. 


Font size also has a big impact on the design and the readability of your 

web pages. There are several ways to specify font sizes with CSS, and in 

this chapter we’ll cover each one, but we’ll also teach you how to specify 
your fonts in a way that allows your users to increase the font size without 

affecting your designs. 


ea? h1 is 21px | pis 4px) | h2 is 17px | 


font-size: 14px; 


} 
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Add color to your text with the color property. 


You can change your text color with the color property. To do that, it Aqua Black Blue Fuchsia 
helps to know a little about web colors, and we'll take you through all the =] 
ins and outs of color, including the mysterious color “hex codes.” Gray Green time Maroon 
es) 
Navy Olive Purple Red 
body esl 
color: silver; Silver Teal White Yellow 
} 
Affect the weight of your fonts with the font-weight property. 
Why settle for boring, average fonts when you can give them some extra | 19] iter 
weight when needed? Or are your fonts looking too heavy? Slim them down = 
to a normal weight. All this is easily done with the font-weight property. n ormal 
body { bold 
font-weight: bold; 
bolder 
Add even more style to your text with the text-decoration property. 
Using the text-decoration property, you can decorate your text with none 
decorations including overlines, underlines, and line-throughs. 
underline 
body { : 
text-decoration: underline; overline 
} 


inre=through 
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overview of 


What is a font family anyway? 


You’ve already come across the font-family property, and so far you’ve 
always specified a value of “sans-serif”. You can get a lot more creative than 
that with the font-family property, but it helps to know what a font family 
is first. Here’s a quick rundown... 


Each font-family contains a set of fonts 

that share common characteristics. There 

are five font families: sans-serif, serif, 

monospace, cursive, and fantasy. Each ’ re 
family includes a large set of fonts, so on Sans-serif family 
this page you'll see only a few examples 

of each. 


Verdana Arial Black 


Trebuchet MS Arial 


The serif Lamil includes fonts with 
serits. f lot of people associate the look 


of these fonts with newspaper print. — 


Sevifs ave the 
decorative barbs 
and hooks on the 
ends of the letters. 


Geneva 


The sans-serif family includes fonts 
without serifs. These fonts are 

usually tonsidered more readable on 
computer streens than serif fonts. 


Serif family 


Times 


Sans—serif means 


. “without sevits.” 
Times New Roman 


6 Fonts aren’t consistently available from one computer 

Georgla to another. In fact, the set of available fonts will vary 
depending on the operating system as well as what 
fonts and applications a user has installed. So keep in 
mind that the fonts on your machine may differ from 
what is available to your users. And, as we said, we’ll 
show you how to extend the set of fonts in a bit... 
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Monospace family 


Courier i— The monospace family is made up of fonts that have constant— 


i N width characters. For instance, the horizontal space an “i” 
Cour sb SG EW takes up will be the same width that an “m” takes up. These 
fonts are primarily used to show software code examples. 


Andale Mono 


The cursive family 
includes fonts that 
look handwritten. You'll 
sometimes see these fonts 
used in headings. 
Take a good look at the font families: serif 
fonts have an elegant, traditional look, 
while sans-serif fonts have a very clean and Cursive family 
readable look. Monospace fonts feel like 
they were typed on a typewriter. Cursive and 
fantasy fonts have a playful or stylized feel. 


Comic Sans 


Apple C hancery 


Fantasy family 
The fantasy font famil ontains 
LAST NINJA  —, stylized a. fonts 
Impact 
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Font Magnets 


Your job is to help the fictional fonts below find their way home 
to their own font family. Move each fridge magnet on the left 
into the correct font family on the right. Check your answers 
before you move on. Review the font family descriptions on the 
previous pages if you need to. 


Ar Fe 
| La 


Bainbridge 
[Bainbridge] Monospace family Fantasy familly 
Cursive family 
Sans-serif family 
Iceland 
Messenger 
Serif family 


Nautica 


All ee 
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Specifying font families using CSS 


Okay, so there are a lot of good fonts out there from several font families. How do you 
get them in your pages? Well, you’ve already had a peek at the font-family property 
in the last chapter, when you specified a font-family of “sans-serif” for the lounge. 
Here’s a more interesting example: 


Usually, your font—family specification contains a 
via list of alternative fonts, all from the same family. 


body { Ws 
font-family: Verdana, Geneva, Arial, sans-serif; 
_—_e 


} 


vanes sis fy ie es Write font names as they 


. are spelled, including upper— 
font using the font—family and ee ies Always put 2 generié Font family mene a 
Property. Just type the font end, like “serif”, “sans-serif”, “eursive’, or 
names separated by Commas. “nonospace”. You'll see what this does in a sec. 


How font-family specifications work 


Here’s how the browser interprets the fonts listed in your font-family specification: 


Cheek to see if the font If Verdana isn’t If Geneva isn’t 

Verdana is available on the available, then look available: then lode fev Finally, if none of the specific 
user’s computer and if so, for the font Geneva, tie ok Real, and at fonts can be found, just use 
use it as the font for this and if it is available, it ic available a it whatever the browser considers 
element (in this ease, the use it for the body. La teh odyy. its default “sans-serif” font. 


<body> element). 
body { ( \ { yr 


font-family: Verdana, Geneva, Arial, sans-serif; 


} You don't have to specify four alternative fonts; you 
tan have two, three, ete. In the last chapter, we only 
used one—the default sans-serif font—although we 
don’t recommend that because it doesn't give you 
much control over the fonts you'd like used. 


The font-family property gives you a way to create a list of preferred fonts. 
Hopefully, most browsers will have one of your first choices, but if not, you can at least 
be assured that the browser will provide a generic font from the same family. 


Let’s get some fonts into your pages... 
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Dusting off Tony’s journal Aeleliafomsiarnererans es 
Now that you know how to specify fonts, let’s take ‘Segway'n USA 
another look at Tony’s Segway’n USA page and Documenting mp tip arromi the US om nny very amen Segway! 


give it a different look. We'll be making some small, 
incremental changes to the text styles in Tony’s 
page, and while no single change is going to look 
dramatically different, by the end of the chapter 
we think you'll agree the site has a slick new look. 
Let’s get an idea of where we might make some 
improvements and then let’s give Tony a new 
font-family. 


Aapust Bh, 202 


, ; ‘Well | mete ® USM eahes aireacty, are? | paul theagh ee eee 
Remember that we havent applied pisces: Thee way 

any styles to Tony's site, so his site > t. Walla: Walla, WA, 

is using a sevif font—family for : Hine ot 


F] 
4 
the entire page. 4, Laat Chane, Co} 
3, Tovar Coneaqaence.: hil 
6. Wy, At 


July 14, 002 


The default size of the heading fonts a | Vda tema Berea Sherer ty gens ues ie adthe of he wis Lehn: 
is also pretty large and doesn't make Pauwlng cars, 


: WWikesk ord cadet ate, 
for an attractive page. May pes yom, 


OF ciemiiy 
The quote is just indented. It \ Tdefisitely won't be pontine any cers. 


would be nite to improve its look | 
a bit by adding some font-style. lacus = 


Except for the photos, this page AA 


is rather monochromatic, so we'll ep fine choy of the trip! Co cant belleve 0 finally pot eoerything packed aod 
also add some font tolor to make meady 1 go. Because Pan on a Seger, J wea able to Dring a whole lot 


it a little more interesting, ng 


Juste eenemtigl, As Lan Tz soo fore ead, "A Sourmery of 0 tomar 
mies begin with ome Segenry.” 
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Getting Tony a new font-family 


Let’s get Tony set up with a font-family. We’re going to start with 
some clean sans-serif fonts. First, create a new file, “journal.css” in the 
“chapter8/journal” folder and add this rule: 


body { 
font-family: Verdana, Geneva, Arial, sans-serif; 


| C ~ 
We're setting the i) You'll see Verdana \ 


: And if all else 
seen property on most: PCs... ..and Geneva on fails, we have 
Re e "be ei sic most Mats. the default 

member, e : 
elements in the <body> firial is sans-serif. 
will inherit these fonts. Common 
on both. 


We've chosen a set of 
sans-serif fonts here. 


Now you need to link Tony’s journal to the new stylesheet file. ‘To do that, open the 
file “journal.html!” in the “chapter8/journal” folder. Add the <1ink> element to 
link in the style in “journal.css”, like we did below. 


We've also gone ahead and updated Tony's 
journal html File to be official HTML®, 
adding in the doctype and the <meta> tag, 


<!doctype html> 


<html> 
<head> 
<meta charset="utf-8"> 
<link type="text/css" rel="stylesheet" href="journal.css"> 
<title>My Trip Around the USA on a Segway</title> > 
</head> Here's where we're 
<body> linking in the new 
“ournaless" file. 
</body> 
</html> 


After you’ve made this change, save the file, fire up your browser, and load the page. 
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some font questions 


Test driving Tony’s new fonts 


Open the page with the new CSS in the browser and you 
should see we’ve now got a nice set of sans-serif fonts. 
Let’s check out the changes... 


The font definitely gives Tony's web page a new 
look. The headings now have a cleaner look without 
the serifs on the letters, although they still look a 
tad large on the page. 


The paragraph text is also 
clean and very readable. 


Because font—family is an inherited property, 
all elements on the page are now using a 
sans—sevif font, even the list elements... 


..and the <blockquote>s. 


And if the serif fonts were more Your 
cup of tea, don’t let us stop you. You ¢an 
always vedo the font—family declaration 
to use serif fonts. 


Neely ne 4 
eST10 . 
um Qu stions Q: So the font-family 


. property is really a set of 
Q: How do | specify a font alternative fonts? 
with multiple words in the 


name, like Courier New? ° Yes. It’s basically a priority 


list of fonts. The first is the font 
you'd like used, followed by a 
good substitute, followed by 
more substitutes, and so on. For 
the last font, you should specify 


A: Just put quotes around 
the name in your font-family 


declaration, like this: 
font-family: "Courier 


New", Courier; the catch-all generic “sans-serif” 
or “serif’, which should be in the 
same family as all the fonts in 
your list. 
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T cketiibaky ven: Gen paamines ary cars. 


Q: Are “serif” and 


“sans-serif” real fonts? 


A: “serif and “sans-serif” are 
not the names of actual fonts. 
However, your browser will 
substitute a real font in place of 
“serif or “sans-serif” if the other 
fonts before it in the font-family 
declaration can’t be found. 

The font used in its place will 
be whatever the browser has 
defined as the default font in 
that family. 
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(): How do | know which to 
use? Serif or sans-serif? 


A: There are no rules. 


However, on a computer display, 
many people consider sans-serif 
the best for body text. You'll find 
plenty of designs that use serif 
for body text, or mix serif fonts 
with sans-serif fonts. So, it really 
is up to you and what kind of 
look you want your page to have. 


How do | deal with everyone having 


different fonts? 


The unfortunate thing about fonts is that you 
can’t control what fonts are installed on your 
users’ computers. Not only that, but they tend 
to differ across operating systems—what might 
be on your Mac may not be on your user’s PC. 


So, how do you deal with that? Well, the tried- 
and-true strategy is to create a list of fonts that 
are most appropriate for your pages and then 
hope the user has one of those fonts installed. 
If he doesn’t, well, at least we can count on the 
browser to supply a generic font in the same 
font family. 


Let’s look at how to do that in a little more 
detail. What you need to do is ensure that your 
font-family declaration includes fonts that 
are likely to occur on both Windows and the 
Mac (as well as any other platforms your users 
might be using, like Linux or perhaps mobile 
devices), and that it also ends with a font family. 


Here’s an example: 


Let’s take a look at 
our definition for Tony's 


pages again... \ 


used, but... 


(1) We'd like for 
Verdana to be 


These fonts 
are likely to 
be available on 
both Windows 
and Macintosh 


computers. 


These bide 


most likely to be 
found on Matintosh 


computers. 
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Andale Mono 
Arial 

Arial Black 
Comic Sans 
Courier New 
Georgia 

Impact 

Times New Roman 
Trebuchet MS 


Verdana 


Geneva 
Courier 
Helvetica 


Times 


(3) That’s okay, because we 
can probably count on Arial 


to be on either Windows or 
Maes, but if it’s not... 


V 


font-family: Verdana, Geneva, Arial, sans-serif; 


(2) If it’s not, Geneva would 

be nice, but this will probably 
only happen on Maes. But if 

it’s not... 
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(4) Then that’s still 
okay; we'll just let the 


browser choose a sans— 


serif font for us. 
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introducing web fonts 


I get how we need to make sure we 
specify fonts that will be appropriate all 
across all my users’ machines, but I was 

really hoping we could use this cool Emblema 
One font I found for my main heading. Can I 
just use that, and if the users don't have it 
they can use a fallback? 


Yes, but there’s a better way... 


Your suggestion would work, but most likely for only 


a very small percentage of your users. If you just 
have to have that oh-so-cool font, or typography is 
important to your site design, you can actually deliver 
a font right to your user’s browser using Web Fonts. 


To do this, you’re going to use a newer feature of 
CSS: the @font-face rule. This rule allows you to 
define the name and location of a font that can then 


be used in your page. 


Let’s see how this works... 
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styling with fonts and colors 


How Web Fonts work 


With Web Fonts you can take advantage of a new capability of modern browsers that allows 
you to deliver new fonts directly to your users. Once the font is delivered, the browser can 
then make use of the Web Font just like it can any other font, and you can even style your 
text with CSS. Let’s look at how Web Fonts work in a little more detail: 


Here's your server. 


Here’s a font file you've / 


stored on Your server. 


The font file contains 
everything, a browser 
we) to use the font 
in Your web Page: 


crazy ‘ont.woff 


www.starbuzzcoffee.com 


Notice this font uses 
a “wokk” file extension, 
which means web open 
font format. of course Your server stoves all 
your HTML and CSS too, but 
we're not showing that here. 


To make use of Web Fonts, the browser first retrieves an 
HTML page that references them. 


“I need index.html" 


“Here ya go" index.html 
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getting started with 


The browser then retrieves the Web Font files needed for 


the page. 


Ah, this page 
uses Web Fonts, I better 
retrieve the fonts I need. 

Looks like I need “crazyfont". 


“I need crazyfont.woff" 


Now, with the font retrieved, the browser uses the font 


when it displays the page. 


Look 

Ma! A new font! 
Finally, something new 
around here! 


Q: What’s the woff, or web open font 
format? 


: Woff is emerging as the standard 
font format for Web Fonts, and you'll see it 


supported today across all modern browsers. 


That said, there has previously been some 
lack of standardization in this area, with 
different browsers supporting different font 
formats. If you need to provide Web Fonts 
to browsers that may not support woff, you'll 
need to supply one or more of a few formats 
that are available as alternatives. Web Font 
hosting services can help a lot here. 
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World! | f 


1 


thereyareno 
Dumb Questions 


Q: So to use a Web Font, | have to 
host the font files on a server? 


A: If you’re just testing fonts you can 
actually store and refer to them as local files 
on your own file system (just like you do with, 
say, an image). But if you want to deliver 
fonts to your users on the Web, you either 
have to host the files yourself on a server, 

or make use of a hosting service, such as 
Google’s, which is free. 
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www.starbuzzcoffee.com 


/ 


Q: If | use a Web Font, can | then 
count on it being there for my users? 


A: As long as they have a modern 
browser (and discounting any network 
connectivity or server issues), for the most 
part, yes. However, if they are using old 
browsers or mobile devices that don’t yet 
support Web Fonts, all bets are off and you 
still need to supply font alternatives (we'll 
see how in a sec). 
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How to add a Web Font to your page... 


So you've got a special font you want to add to your page? Let’s step through how to do that using 
Web Fonts and the @font-face rule in GSS. 


Step one: Find a font 


If you don’t have a font, like Tony does, you'll want to visit the many sites out there that have both 
free and licensed fonts you can use in your pages (check out the appendix for more information). 
We’re going to use Tony’s suggestion, Emblema One, which is a free font. 


Step two: Make sure you have all the formats of the font you need 


Here’s the good news on Web Fonts: the @font-face CSS rule is pretty much a standard across 
modern browsers. Here’s the bad news: the actual format used to store the fonts isn’t quite yet a 
standard (although we’re getting there), and in fact there are several different formats (at the time 
of writing) supported across the browsers to varying degrees. Here are the common formats (and 
their respective file extensions): 


inept TrueType and OpenType fonts are closely related; 


OpenT ype is built on top of TrueT ype (and is 
ia newer than TrueT ype)- 


OpenType fonts: .otf 


Embedded OpenType (EOT) is a compact form of OpenT ype: 


Embedded OpenType fonts: .eot [t's proprietary (Microsoft), and supported only on IE. 


Scalable Veetor Graphits, or SVG, is a general—purpose graphics 


SVG fonts: .svg format, and SVG fonts use this format to represent Characters. 


Web open font format: .woff LE ™ Web open font format is based on TrueType, and is being developed as a 
standard for Web Fonts. [t's well supported on most modern browsers. 


The best supported format across most modern browsers is web open font format, so that’s 
the one we recommend you use. You can offer an alternative for older browsers; we’ll use 
TrueType as that’s well supported across all browsers too (except IE). 


Step three: Place your font files on the Web 


You’ll want to place your font files on the Web, so they are accessible to your user’s browsers. Or 
you can use one of the many font services coming online that will host these files for you. In 
either case, you'll need the URL of your font files. Here are Tony’s files, which we’ve placed on 
wickedlysmart.com: 


http: //wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff 


http: //wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf 
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adding a web font to the journal 


Step 4: Add the font-face property to your CSS 


You’ve got the URLs for the .woff and .ttf versions of the font named “Emblema One,” so now 
you're ready to add a @font-face rule to your “journal.css” file. Add the rule to the éop of the 
file, above the body rule: 


Unlike a normal rule that seleets a set of elements and . 
Let’s start the rule assigns style, the @fLont—face rule sets up a font, which is 
with @font—face. assigned to a font—family name for later use. 
2 Lo In the @Lont—face rule, we create a name Lor our font using the ene 
@font-face { property: You ¢an use any ndme You want, but it is best usually to just mate 
name, |i “Emblem On - 
font-family: "Emblema One"; font name, like “Emblema One 

src: url("http://wickedlysmart .com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"), 


url ("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf£") ; 


The sre property tells the browser where to get the font. We need 
to specify a sre value for every File the browser might recognize. 
In our Case, we're going to supply both the -woff and ttf types 
recognized by today’s browsers. 


The @font-face rule tells the browser to load the font files at the src URLs. Browsers will 
attempt to load each src file until it finds one that it can support. Once loaded, the font is 
assigned the name you specify in the font-family property—in this case, “EmblemaOne.” 
Now let’s take that font and see how we can use it in the style of the page. 


t . . Hint: you already know 
Step five: Use the font-family name in your CSS sa bode tel 


Once you’ve loaded a font into the browser with the @font- face rule, you can use the font 
by referencing the name you gave it with the font-family property. Let’s change the font 
of the <h1> heading in Tony’s page to use the “Emblema One” font. To do that, we'll add 
a rule for <h1> like this:: 


We specify the name of the font just like 
— — normal, only this time, it’s a font weve 


font-family: "Emblema One", sans-serif; loaded using, @Lont—Lacel — in Case 
: something goes wrong, we specity sans—sevit 
e as a fallback. 


Step six: Load the page! 


That’s it! You’re ready to test your font. Reload Tony’s journal page and check out the next 
page to see what we got... 
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Test drive the Web Font in 
Tony’s journal ste 


When you reload “journal.html’, you should see the 
<h1> heading at the top of the page use the Emblema 
One. Not bad for just a few lines of CSS! 


Now, the <hl> heading at the 
top of Tony's journal page is 
using, font “Emblema One.” 


TTF and WOFF 

font formats 

don't work in IE8 
! and earlier. 


Wateh if: If you want to 


support users with older IE browsers, 
you'll need to do a bit more work with 
Web Fonts, and use an EOT font. 


Q: The @font-face rule doesn’t really 
look or act like a CSS rule, does it? 


A: You're right; think of @font-face as 

a built-in CSS rule rather than a rule that 
acts like a selector. Instead of selecting an 
element, @font-face allows you to retrieve 

a Web Font, and assign it to a font-family 
name. The @ at the beginning is a good clue 
this isn’t an ordinary CSS rule. 


Q: Are there other built-in CSS rules | 
should know about? 


A: There are. Two common built-in rules 
you'll see are @import, which allows you to 
import other CSS files (rather than a <link> 
in your HTML), and @media, which allows 
you to create CSS rules that are specific to 
certain “media” types, like a printed page 
versus a desktop screen versus a mobile 
phone. More on @media later. 
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Dumb Questions 


Q: Web fonts seem great; are there 
any disadvantages to using them? 


A: A few. First, it takes time to retrieve 
Web Fonts, and so your page performance 
might suffer the first time you have to 
retrieve them. Also, there’s the pain of 
managing the multiple font files. Finally, you 
may find mobile and small devices that don’t 
support them, so make sure you always 
allow for alternatives in your design. 


Q: Can | use multiple custom fonts 
with @font-face? 


A: Yes. If you're using @font-face to load 
the fonts, then for each font you want to use, 
make sure the font files are available on your 
server, and create a separate @font-face 
rule for each one, so you can give each a 
unique name. 


For even more on Web Fonts, 
check out the appendix. 
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However, remember to make sure you only 
choose the fonts you really need in your web 
page; each extra font takes extra loading 
time for your page, so having multiple Web 
Fonts in your page will slow down your web 
page. If it gets too slow, you might have 
frustrated users on your hands! 


Q: You mentioned services to help 
me with hosting Web Fonts. Can you say 
more? 


A: Sure! FontSquirrel (http://www. 
fontsquirrel.com/) is a great place to find 
open source, free fonts that you can upload 
to your server. Their font kits make it easy to 
offer multiple formats of a given font. Google 
Web Font Service (http://www.google.com/ 
webfonts) is a way you can let Google do all 
the hard work for managing the fonts and the 
CSS for you; in this case, you just link to the 
fonts you want on the Google service, and 
then use the names in your CSS. Easy! 
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Adjusting font sizes 


Now that Tony has a new set of fonts, we need to work on those font sizes, as most If you ae things right, a 
people find the default sizes of the headings a bit large, at least aesthetically. To do oe user will be able to bales 
that, you need to know how to specify font sizes, and there are actually a few ways the font sizes on your we 


to do this. Let’s take a look at some ways to specify font-size, and then we’ll talk 
about how best to specify font size so they are consistent and user friendly. 
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You can specify your font size in pixels, just like the pixel dimensions you used 


px for images in Chapter 5. When you specify font size in pixels, you’re telling 


the browser how many pixels tall the letters should be. 


The px must Come right after the number of This says Here ae 
pixels. You can't have a space in between. should be Ir pixels high. 


font-size within a body 


Here’s how you'd specify ve) h/i|p|{ I4 pixels 


body { 


} 


font-size: 14px; EN he CSS; you specity pixels with 


font-size: 14px; 


page for readability. You'll 
see how in a Couple of pages: 


a number followed by “px”. 


(tin a font to I4 pixels high 
means that there will be 14 
pixels between the lowest part of 
the letters and the highest. 


So 


Chapter 8 


Unlike pixels, which tell the font exactly how big it should be in pixels, a font size specified 
as a percentage tells the font how big it should be relative to another font size. So, 


font-size: 150%; Here we've specified a body font size in 
pixels, and a level—one heading as 150%. 

says that the font size should be 150% ro \ 
of another font size. But which other body { 
font size? Well, since font-size is font-size: 14px; 
a property that is inherited from the } 
parent element, when you specify a hl { 
percentage font size, it is relative to font-size: 1503; 
the parent element. Let’s check out } 


how that works... 
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You can also specify font sizes using em, which, like percentage, 1s another 

em relative unit of measure. With em, you don’t specify a percentage; instead, 
you specify a scaling factor. Here’s how you use em: Don’t mix this 

ith the 
This says that the up wit | 
: <em> element! 
font-size: 1.2em; font size should be 
staled by |.2. 


Say you use this measurement to specify the size of an 
<h2> heading. Your <h2> headings will be 1.2 times the 
font size of the parent element, which in this case is 1.2 


It’s actually 16.8, but 
i ich i most browsers will 
times 14px, which is about 17px. meaepeer 
body { 


font-size: 14px; And here’s the <h2> 


ot. 
i ecified by |.Lem. 
a Here’s the <hI> specified body is 14px speciried by |.2em 
font-size: 150%; by ‘ percentage. 
} \ 
h2 { 


font-size: 1.2em; h1 is 21px p is 14px | h2 is 17px | 


If we draw a little dotument tree, you ¢an see that <hl> 
inherits from <body>, so its font is going to be 150% of 
the body's font size. 


body is 14px 


S 


The <hl> heading is Since we didn't specify a font 
150% of the <body> size for <p>, it inherits the 
font size, whith is ZI px. <body> font size of l4px. 
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using keywords for size 


that are defined in the browser. 


This is typically how the various keyword sizes relate to 
one another. Each size is about 20% larger than the 
previous size, and small is usually defined to be around 
12 pixels in height. Keep in mind, however, that the 
keywords aren't always defined the same way in every 
browser, and that users Can redefine them if they want. 


body { 
font-size: small; 


} 


In most browsers, this will result in the 


body text being about |2. pixels. 


So, how should | specify my font sizes? 


You’ve got quite a few choices for specifying font sizes: px, em, percentages, and 
keywords. So, which do you use? Here’s a recipe for specifying font sizes that 
will give you consistent results for most browsers. 


e Choose a keyword (we recommend small or medium) and specify it as the 
font size in your body rule. This acts as the default size for your page. 


(2) Specify the font sizes of your other elements relative to your body font size 
using either em or percentages (the choice between em and percentages 
is yours, as they are essentially two ways to do the same thing). 


Nice recipe, but what’s good about it? By defining your fonts relative to the 
body font size, it’s really easy to change the font sizes in your web page simply 
by changing the body font size. Want to redesign the page to make the fonts 
larger? If your body font size value is small, simply change it to medium, and 
voila—every other element will automatically get larger in proportion because 
you specified their font sizes relative to the body’s font size. Better yet, say your 
users want to resize the fonts on the page. Again, no problem; using this recipe, 
all the fonts on the page will automatically readjust. 
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keyw ords There’s one more way to specify font sizes: keywords. You 


can specify a font size as xx-small, x-small, small, 
medium, large, x-large, or xx-large and the browser 
will translate these keywords into pixel values using defaults 


xx-small 


x-small 


small 


medium 
large 
x-large 


xx-large 


Let’s look at how this all works. First, you set a size for your 
<body> element. Then, you set all the other font sizes relative to 


that size, like this: 


body { font-size: small; } 
hl { font-size: 150%; } 
h2 { font-size: 120%; } 


That gives you a document tree that looks like this: 
We've set <h2>’s 

1) 
font size to 120% 
of its parent's size. 


The font size of <hI> 
is 150% the font size 
of <body>. 


body is small 


The <p> doesn't have a font-size value set, 2) 
by default, it inherits the <body> font size. 


Now let’s say you want to increase the size of the fonts on the page, 
or perhaps the user does. Then you get a tree that looks like this: 


Now let’s say you decide to make your a 
font size bigger, OR the user makes the 


font size bigger using, the browser. 


body is large 


All Your other elements 
automatically get bigger too, 
without you having to doa tnng 


h1 is 150% of body : pis small) | h2 is 120% of body 
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Older versions of 
Internet Explorer 
do NOT support 


when you specify 
the font size using pixels. 


Watch it! text sealing 


Unfortunately, users of older 
versions of Internet Explorer cannot 
resize fonts if your font sizes are 
specified using pixels. So, that’s 
one reason to stay away from pixel 
sizes. If you use pixels, you'll be 
reducing the accessibility of your 
Pages for some of your users, 
although hopefully not for too 

much longer as users continue to 
upgrade their browsers. 


Fortunately, if you follow the 
recipe of supplying a ke 'yword to 
define your body’s font size, and 
use relative sizes for your other 
elements using em or %, then IE 
will properly scale your fonts if the 
browser is asked to make the text 
bigger or smaller. 


h2. is still 120% the size of 


the body font size: |n this 
ease, it's 120% of “large. 


! 


Now the body font size has changed to large, and everything else has 
changed too, in relation to the body font size. That’s great, because 
you didn’t have to go through and change all your other font sizes; 

all you had to do was change the body font size. And if you’re a user, 
everything happened behind the scenes. When you increased the text 
size, all the text got bigger because all the elements are sized relative to 
one another, so the page still looks good at a larger font size. 
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h1 is 150% of body p is large | h2 is 120% of body 
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setting up 


Let’s make these changes to the 
font sizes in Tony’s web page 


It’s time to try these font sizes in Tony’s web page. Add the new properties to the 
“Journal.css” file in the “chapter8/journal” folder. Once you’ve made the changes, 
reload the page in the browser and check out the differences in the font size. If you 
don’t see a difference, check your CSS carefully for errors. 


@font-face { 

font-family: "Emblema One"; 

sre: url ("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne- 
Regular.woff"), 

url ("http: //wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne- 

Regular.ttf") ; 
} 
body { 

font-family: Verdana, Geneva, Arial, sans-serif; 

font-size: small; < Following our recipe, we ve using a font-size 


} of small for the <body> element. This will 


hl { att as the base font size. 


font-family: "Emblema One", sans-serif; 
And we'll set the other fonts relative to the 


font-size: 220%; TH body font size. In the ease of <hi>, we'll try a 


font size that is 220% of the base font size. 
h2 { 

font-size: 130%; —< — Well make the <h2> font size 
} smaller than <hl>, or 130% of 


the body font size. 


your pencil 


If you specified <h1> and <h2>’s font sizes using em rather than 
percentage, what would their values be? 


‘Wag’ <ZY> PUD WIZZ aq 
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Test driving the font sizes 


Here’s the evolving journal, complete with new 
smaller fonts. Check out the differences... 


Here’s the previous 

version before the 

change in font sizes. 

Tals ss Docarrecking my kris eraerd the US on my very cen Sages 


_Afe Tg Arca ee 
| August 2D, 2042 


Te a a Bk Pad 


Sequwag'n U8A 


Piatra 


Segway'n URA 
Dacamenting ry trig around the: ust | 
Auguat 20, 2012 


| Wek 2 ade i L008 mikes otreody, ered b pene! thesugh corre ir enening 


| places on thee way 
L, Weally Ova by, 
2. Magic Oty, 
3, Baasatifel, aT 
3. Lot Charce, 0D 
5. True of Gor seqeres, WM 
Welk 1 made it 1200 mites already, & &. Wing, AX 
earesting lacie on ba wey: July 14, 2042 
1. Walla Walla, WA | Sw Soca Bure Shae wtp aegre on the aide ad Cee ree Ledey 
2. Magic Gey, ID 2 
3, Gountcul, iT nie maakintiy ley 
When pe can't ane, 
4, Last Chance, 00 May pal wet 
5. Truth or Consequemces, MM A pimps, 
&. why, AZ OF eternity 
i retired t 
July 14, 2012 Fert fe pei ay cere. 
june 2, 2512 
few pome Durie Shae syle wig) 
Bansing care, 
When vou cine sed, — 
May get you, 
A glimpse, 
OF eternity. 


TL definitely wont be possing any = 


ip oo. Bsc Pm os 2 Bega, 0 ert adds being 2 ered) Bot yo me; 


= dole comers 
# An 8 probe ber 


My Firmi: chap of Ghee trict 2 can't Seleree ] BraEy got ewerihing cocked aed comet 


styling with fonts and colors 


Here’s the new version with updated 
fonts. The design is starting to look 
a little less clunky! 


This <hl> heading looks 


me | muth better now. [t's 


bigger than the <h2> 
headings but doesn't 
overwhelm the body text 
and the page in size. 


The body text is 

a tad smaller. The 
default body text 
font size is usually 
lbpx, although it 
does depend on the 
browser. But it’s 
still easily readable 
at the “small” size, 
which is probably 
about |Z px. 


<——t See 


is a bit smaller too, 
and is a good size 
compared to the 
<hl> heading, 
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Q: So, by defining a font size in the 
<body> element, I’m somehow defining a 
default size for the page? How does that 
work? 


A: Yes, that’s right. By setting a font 
size in your <body> element, you can then 
define the other font sizes of your elements 
in relation to their parent. What's so great 
about that? Well, if you need to change the 
font size, then all you need to do is change 
the body font size, and everything else will 
change in proportion. 


Q: Do we really need to worry about 
users resizing their browser fonts? | 
never do that. 


A: Yes. Almost all browsers allow their 
users to make the text of a page bigger or 
smaller, and many users take advantage 

of this feature. If you define your fonts in a 
relative manner, then your users will have no 
trouble doing this. Just be careful not to use 
pixel sizes, because some browsers have 
problems resizing those. 


Q: | like the idea of using pixels 
because then my page will look exactly 
like | specify it. 


A: There is some truth to that—by using 
pixels for every element's font size, you 
are choosing the precise font size you want 
for each element. But you do that at the 
cost of giving some of your users (the ones 
using older versions of Internet Explorer) 
the flexibility to pick a font size that is 
appropriate for their display and eyesight. 


You also are creating pages that are a 

little harder to maintain because if you 
suddenly want to increase the font sizes of 
all the elements in a page, you have a lot of 
changes to make. 
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: What's the difference between em 
and %? They seem like the same thing. 


A: They are basically two different ways 
to achieve the same thing. Both give you a 
way to specify a size relative to the parent 
font size. A lot of people find percent easier 
to think about than em, and also easier 

to read in your CSS. But you should use 
whichever you want. 


Q: If | don’t specify any font sizes, do | 
just get the default font sizes? 


A: Yes, and what those sizes are 
depends on your browser, and even the 
version of the browser you are running. But 
in most cases, the default body font size will 
be 16 pixels. 


Q: And what are the default sizes for 
the headings? 


A: Again, it depends on the browser, but 
in general, <h1> is 200% of the default body 
text font size, <h2> is 150%, <h3> is 120%, 
<h4> is 100%, <h5> is 90%, and <h6> is 
60%. Notice that by default <h4> is the same 
font size as the body font size, and <h5> and 
<h6> are smaller. 


Q: So rather than using the size 
keywords, can | use em or % in the body 
rule? If | use 90% for the font size of the 
body, what does that mean exactly? It’s 
90% of what? 


A: Yes, you can do that. If you specify 

a font size of 90% in your body rule, then 
that would be 90% of the default font size, 
which we just said is usually 16 pixels, so 
90% would be about 14 pixels. If you'd like a 
font size slightly different than the keywords 
provided, go ahead and use % or em. 
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Q: There seems to be so many 
differences between browsers: font- 
family, font-size, various default settings, 
and so on. How will | ever know if my 
design looks good on other browsers? 


A: Great question. The easy answer 

is that if you follow the guidelines in this 
chapter, then most of your designs are going 
to look just fine in other browsers. However, 
you should know that they may look slightly 
different in different browsers—the fonts may 
be slightly bigger or smaller, spacing here 
and there may be different, etc. But all the 
differences should be very minor and should 
not affect the readability of your pages. 


However, if you really care about having 
your pages looking almost identical in many 
browsers, then you really need to test them 
in lots of browsers. And to really take this 

to the extreme, you'll find a variety of CSS 
“hacks” to try to make different browsers 
behave the same. If you want to take it this 
far, there’s nothing wrong with that, but just 
keep in mind a lot of these activities take 
time and have diminishing returns. 


Changing a font’s weight 


The font-weight property allows you to control how 
bold the text looks. As you know, bold text looks darker 
than normal text and tends to be a bit fatter too. You 
can make any element use bold text by setting the 
font-weight property to bold, like this: 


font-weight: bold; 


You can also go the other way. If you have an element 
that is set to bold by default, or is inheriting bold from a 
parent, then you can remove the bold style like this: 


font-weight: normal; 


There are also two relative font-weight properties: 
bolder and lighter. These will make your text 
style a little bolder or a little lighter relative to its 
inherited value. These values are seldom used and 
because not many fonts allow for slight differences in 
the amount of boldness, in practice these two values 
often have no effect. 


You can also set your font-weight property to a 
number between 100 and 900 (in multiples of 100), 
but again, this is not well supported across fonts and 
browsers and so is not often used. 


your pencil 


styling with fonts 


Starbuzz Coffee 


fl Beverages 
7 


font-weight: normal; 


Beverages 


(77 Starbuzz Coffee 


font-weight: bold; 


Write the CSS to change the second-level headings in Tony’s page from their default 
bold value to normal weight. Then, add the rule to your CSS and give it a test drive. 
You'll find the answer to this one on the next page. 
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Test drive the normal-weight headings 


Here’s what your CSS should look like after you make the change to 
use a normal font-weight for the <h2> headings: 


@font-face { E~ We've leaving out the full @font—Lace 


definition to save some space. 


} 
body { 
font-family: Verdana, Geneva, Arial, sans-serif; 
font-size: small; 
} 
hl { 
font-family: "Emblema One", sans-serif; 
font-size: 220%; 
} os ram — 
h2 { Se I ee ad 7, 
font-size: 130%; = = i 
font-weight: normal; sSeqway'n USA 
} J 


Gecumenting any ip arautd the LS aa eee wery own Segway! 


AUguet 20, 2012 


Here we're Changing the font-weight 
of the <h2> headings to normal. 


(ell Emde it 1200 miiea already, and | saad through some 
interesting Glaces on the wey: 


, Vitale alia, A 

Paget Gry, 0 

Bountiful, UT 

Last Ceance, CO 

Truth or Comsequences, NM 
Why, AZ 


en bata ot 


And here are the results. The <h2> 

headings are now lighter looking. ; 
July 14, 2012 

You ean still tell they are headings esi 

because they are 130% the size of F eaey sore Berna, Seve etyle pigns: on the aie of the coe tostey: 


the body text. Passing cars, 


When yrs cant ee, 
May get you, 

4 glimpse, 

Of atarnety, 


T defiitely wont. be passingery care, 
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Adding style to your fonts 


You're familiar with zéalic text, right? Italic text 
is slanted, and sometimes has extra curly serifs. 
For example, compare these two styles: 


The italie text is slanted to the right 


not italic . 
and has extra curls on the serifs. 


italic 


You can add an italic style to your text in 

CSS using the font-style property: A common mistake is to 

ko omrite “italie” as “italies”. 
\f you do, You won t see 
italic text. So remember 
to check your spelling. 


However, not all fonts support the italic style, 


font-style: italic; 


so what you get instead 1s called oblique text. 
Oblique text is also slanted text, but rather 
than using a specially designed slanted set of 
characters in the font, the browser just applies 
a slant to the normal letters. Compare these 
non-oblique and oblique styles: 


not oblique The regular letters are 
bli slanted to the right in 
onique the oblique style. 


You can use the font-style property 
to get oblique text too, like this: 


font-style: oblique; 


In practice, you’re going to find that, depending 
on your choice of font and browser, sometimes 
the two styles will look identical, and sometimes 
they won't. So, unless italic versus oblique is 
very important to you, choose one and move 
on. If it zs important, you'll need to test your 
font and browser combination for the best 
effect. 
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Italic and oblique 
styles are two styles 
that give fonts a 
slanted appearance. 


Unless you can control 
the fonts and browsers 
your visitors are 

using, you'll find that 
sometimes you get italic, 
and sometimes oblique, 
no matter which style 
you specify, 


So just go with italic 
and don’t worry about 
the differences (you 
probably can’t control 
them anyway). 
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Styling Tony’s quotes — Eee ee 
with a little italic 


Now we’re going to use the font-style property 
to add a little pizzazz to Tony’s quotes. Remember 


Seqway'n USA 
Goqumenting my trip around the San my ver oan Beqeray! 


the Burma Shave slogan in the <blockquote> August 20, 2012 


element? We’re going to change the slogan to italic 
style to set it off from the rest of the text. To do 
that, we just need to style the <blockquote> witha 
font-style of italic, like this: 


blockquote { 
font-style: italic; 
} Well f muda ft L500 miles otreeds, ed 1 pessed throegh some 


Interesting maaoes on the way! 
Add this new CSS rule to the CSS in your Walla Wadi: Wh 


i 
“Journal.css” file, save it, and give the page a 2. Magic City, ID 
. 3, Bountiful, UT 
test drive. You should see the Burma Shave 4. Lit Charnes, C6 
slogan change to italic; here’s our test drive. rt Truth or SaaS ne 


duly 14, 2042 


I saw Soe Burma Shave style shone an the ide of the mad today! 


there,are no a 
° SITY CAT, 
O ihe poe GT see, 
Dumb Questions when yo cs 
Ai Gvltsri pie. 
OF eternity, 
Q: The text for the <blockquote> is actually inside 1 Getieheey veHE be petri any carn 


a <p> that’s inside the <blockquote>. So, how did this 
change the paragraph to italic? 


June 2, 2012 


A: Remember, by default most elements get their font 
styles from their parents, and the parent of this paragraph 
is the <blockquote> element. So the paragraph within the 
<blockquote> inherits the italic style. 


Q: Why didn’t we just put the text into an <em> 

element inside the <blockquote>? Wouldn’t that do the Here’s the new style on the Burma Shave 

same thing and make the <blockquote> italic? slogan in Tony's page. We got slanted text, 
just like we wanted. 

A: Remember that <em> is for specifying structure. <em> 

says that a set of words should be emphasized. What we’re 

doing is styling a <blockquote>, we are not indicating that the 

text in the <blockquote> should be emphasized. So, while 

you're right, on most browsers <em> is styled with italic, it’s 

not the right way to style the text in the <blockquote>. Also, 

keep in mind that the style of <em> could change, so you 

shouldn’t count on <em> always being italic. 
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Cool. Love the new look. Hey, 
how about a little color in those 
fonts? Say, ummm...the color of 
my shirt? I love orange! 


You'd think we could just tell you there 
was a color property and send you on 
your way to use it. But unlike font sizes 

or weights or text styles, you’ve got to 
understand a fair bit about color to be able 
to work with it and specify it in CSS. 


So, over the next few pages, you’re going 
to dive into color and learn everything 
you need to know to use it on your pages: 
how colors on the screen work, the various 
ways of describing color in CSS, what 
those mysterious hex codes are all about, 
whether you should be worried about 

“web-safe colors,” and what’s the easiest 
way to find and specify colors. 
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overview of 


How do web colors work? 


You're starting to see that there are lots of places you can add color to your 
pages: background colors, border colors, and soon, font colors as well. But 
how do colors on a computer actually work? Let’s take a look. 


Web colors are specified in terms of how much 
red, green, and blue make up the color. You 
specify the amount of each color from 0 to 

| 100% and then add them all together to arrive 
100% Red / 100% Blue | at a final color. For instance if you add 100% 
red, 100% green, and 100% blue together, you 

} / get white. Notice that on a computer screen, 

; mixing together colors results in a lighter color. 
After all, this is light we’re mixing! 


100% Green 


Here's ved, green, and blue being 
mixed together. [f you look at the 
center you'll see how they all add up. 


60% Red 60% Blue But if you add, say, only 60% of each 
component (red, green, and blue), then what 
would you expect? Less white, right? In other 


words, you get a gray color, because we’re 
a adding equal amounts of the three colors, but 
not as much light to the screen. 


60% Green 
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On a Computer streen, if O% blue is added, 
then blue doesn t add anything to the color. 


Or, say you mix together 80% red and 40% 
green. You’d expect an orange color, right? 
Well, that’s exactly what you'll get. Notice that 
if a color is contributing zero, then it doesn’t 80% Red 0% Blue 
affect the other two colors. Again, this is 
because there is no blue light being mixed with 
red and green. 


Mixing, 80% ved and 
40% green, we get a 40% Green 


nice orange Color. 


And what if you mix 0% of red, green, and 

blue, then what do you get? That means you’re ‘ 
sending no light of any kind to the screen, so 0% Red 0% Blue 
you get black. 


0% Green 
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342 


Why do I need to know all 
this “color theory"? Can't I just 
specify my colors by name? Like 
“red," “green,” or “blue”? That's 

what we've been doing so far. 


You certainly can use color 
names all you like, but CSS 
defines the names of only 
about 150 colors. 


While that may seem like a lot, that 
palette gets old pretty quickly and really 
lumits the expressiveness of your pages. 
We're going to show you how to specify 
colors in a way that will allow you to 
name a lot more than 150 colors; in fact, 
you'll be able to work from a palette of 
sixteen million colors. 


Now, you’ve already seen a few examples 
of colors in HTML, and yes, they do 
look a little funky, like #£c1257. So, let’s 
first figure out how to specify colors and 
then you'll see how you can easily use 
color charts, online color pickers, or your 
photo editing application to pick your 
colors. 
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How do I specify web colors? 
Let me count the ways... 


CSS gives you a few ways to specify colors. You can specify the 
You ¢an count on these |6 


name of a color, specify a color in terms of its relative percentages 
tolors in any browser, but 


in red, green, and blue, or you can specify your color using a hex 


code, which is shorthand for describing the red, green, and blue you might only find the 
150 extended colors in 


newer browsers. 2 


components of the color. 


While you might think that the Web would have decided on one 

format by now, all these formats are commonly used, so it’s good 
to know about them all. However, hex codes are by far the most 

common way of specifying web colors. But remember that all 


these ways of specifying color ultimately just tell the browser the Aqua Black 

amount of red, green, and blue that goes into a color. 

Let’s work through each method of specifying colors in CSS. : 
Blue Fuchsia 


Specify color by name 


The most straightforward way to describe a color in CSS is just to 
use its name. There are 16 basic colors and 150 extended colors 
that can be specified this way. Let’s say you want to specify the color 
“silver” as the background color of a body element; here’s how you 
write that in CSS: Maroon 


body { 
ee background-color: silver; 
} 


And the color 
written as a name. 


Here’s the body rule. And the background-color 


property. 


Silver 


So, to specify a color by name, just type the color name as the value 


of the property. CSS color names are case-insensitive, so you can 
type silver, Silver, or SILVER, and all will work. Here are the 16 White Yellow 


basic colors in CSS. Remember, these are just names for predefined 
amounts of red, green, and blue. eee 


Color in a book happens by light bounting off the printed page. 
On a computer, the light is emitted by the screen, so these 
tolors will lock slightly different in your web pages. 
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Specify color in red, green, and blue values 


You can also specify a color as the amount of red, green, and blue. So, 
; 80% Red 0% Blue 
say you wanted to specify the orange color we looked at a couple of 


pages back, which consisted of 80% red, 40% green, and 0% blue. 
Here’s how you do that: 


es 


40% Green 


body { 
background-color: rgb(80%, 40%, 0%); 


} 
yy ae ae 
nd then specify th centages tor 
Begin with “rgb”, short ’ seaapiel Rica beeen 


if ved, green, and blue within parentheses, 
ere areen blue. and with a % sign after each one. 


You can also specify the red, green, and blue values as a numeric value 


i m mn ne 
between 0 and 255. So, instead of 80% red, 40% green, and 0% blue, Where did these numbers Come From! 


you can use 204 red, 102 green, and 0 blue. 


Here’s how you use straight numeric values to specify your color: 


body { 


80% of 255 is 204, 
40% of 255 is 102, and 
O% of 255 is O. 


background-color: rgb(204, 102, 0); 


We still start with “gb”. 
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b Questions 
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Q: Why are there two different ways to specify rgb values? 
Don’t percentages seem more straightforward? 


A: Sometimes they are more straightforward, but there is some 
sanity to using numbers between 0 and 255. This number is related 
to the number of values that can be held in one byte of information. 
So, for historical and technical reasons, 255 is often used as a unit 


of measurement for specifying red, green, and blue values in a color. 


In fact, you might have noticed that photo editing applications often 
allow you to specify color values from 0 to 255 (if not, you'll see how 
to do that shortly). 
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KT To specify numeri¢ values and not 
percentages, just type in the value 


and don’t use a 7%. 


Q: | never see anyone use rgb or actual color names in their 
CSS. It seems everyone uses the #00fc9a type of color codes. 


A: Using rgb percents or numeric values is becoming more 
common, but you are right, “hex codes” are still the most widely used 
because people consider them a convenient way to specify color. 


Q: Is it important that | be able to look at something like 
rgb(100, 50, 200) and know what color it is? 


A: Not at all. The best way to know what rgb(100, 50, 200) looks 
like is to load it in your browser or use an online color picker or photo 
editing application to see it. 
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Specify color using hex codes 


Now let’s tackle those funky-looking hex codes. Here’s the secret to them: each set of two 
digits of a hex code just represents the red, green, and blue component of the color. So the 
first two digits represent the red, the next two the green, and the last two represent the blue. 


Like this: 
an Then specify the 
Always start a hex code 


ved, green, and blue 


with the # sign. # cc 6 6 '@) '@) Components, using 


a. apeen be two digits for each. 


Ne 


Wait a sec, how is “f" 
or “c" a digit? Those 
are letters! 


Believe it or not, they are digits, but they’re 
written using a notation only a computer 
scientist could love. 


Here’s the second secret to reading hex codes: each set of two 
digits represents a number from 0 to 255. (Sound familiar?) 
The problem is that if we used numbers, we’d only be able to 
represent up to 99 in two digits, right? Well, not wanting to be 
constrained by something as simple as the digits 0-9, computer 
scientists decided they could represent all 256 values with the 
help of some letters too (AF). This is the hexadecimal system of 
numbering, or “hex” for short. 


Let’s take a quick look at how hex codes really work, and then 
we'll show you how to get them from color charts or your photo 


editing application. 
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The two-minute guide to hex codes 


The first thing you need to know about hex codes is that they aren’t based on 10 
digits (0 to 9); they’re based on 16 digits (0 to F). Here’s how hex digits work: 


Using hex, you only need a single 
digit to count all the way from 
O to 15. When you get above 4; 
you start using letters. 


So if you see a hex number like B, you know that just means 11. But what does BB, 
or El, or FF mean? Let’s disassemble a hex color and see what it actually represents. 
In fact, here’s how you can do that for any hex color you might encounter. 


Step one: 
Separate the hex color into its three components. 


Remember that each hex color is made up of a red, green, and blue component. 
The first thing you want to do is separate those. 


> Take your hex tolor and 


break it up into its red, 


# CE 6 6 O O green, and blue components. 


Es, 
CC 66 


00 
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Step two: 
Convert each hex number into its decimal equivalent. 


Now that you have the components separated, you can compute the value for 
each from 0 to 255. Let’s start with the hex number for the red component: 


Take the rightmost 
number and write down 
CC its decimal value. 


Now take the leftmost 1 2 
number and convert it to 
its decimal value, and also 


multiply it by 18. 12 * 16 = 192 


Finally, add these two Co 20% is the decimal 
wnber tether «19D + 12 = 204 Srantctccmier 


Step three: 
Now do this for the other two values. 


Repeat the same method on the other two values. Here’s what you should get: 


To ealeulate 56, you have 


CC 66 ore) (6 * |b) + 6 = 102. 


yy L Ny To ealeulate OO, you have 


204 102 0 (0 * 1b) +0=0. 


Step four: 
There is no step four; you're done! 


That’s it. Now you’ve got the numbers for each component and you know 
exactly how much red, green, and blue go into the color. You can disassemble 


any hex color in exactly the same way. Now let’s see how you'll usually 
determine web colors. 
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Putting it all together 


You've now got a few different ways to specify colors. Take our orange 
color that is made up of 80% red, 40% green, and 0% blue. In CSS, 
we could specify this color in any of these ways: 


80% Red 0% Blue 


40% Green 


body { 


background-color: rgb(80%, 40%, 0%); es Specify by the percentage 
} 


ved, green, and blue. 


— - > i of ved, green; 
background-color: rgb(204, 102, 0); Specify the amount ie : 3 
and blue on the stale O-272. 


body { 


background-color: #cc6600; oS specify using a hex code. 
} 


How to find web colors 


The two most common ways to find web colors are to use a color chart or an 
application like Photoshop Elements. You'll also find a number of web pages that 
allow you to choose web colors and translate between rgb and hex codes. Let’s 
check out Photoshop Elements (most photo editing applications offer the same 


functionality). 

Cobor Picker 
Most photo editing | Setect foreground color 
applications provide a color — 


picker that allows you to 
visually choose your Color 


by using one or more color 
spectrums. 


Color pickers also 
allow you to select 
only “web-safe” 
colors. We'll talk 
about this in a sec. 


Once you've picked 
a color, the color 
picker will show you 
the tolor as both 
rgb values and a 
hex Code. 


—Girdy Wied Gaba rs 
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Using an online color chart 


You'll also find some useful color charts on the 
Web. These charts typically display web colors 
that are arranged according to a number of 
different criteria with their corresponding hex 
code. Using these colors is as easy as choosing 
the colors you want in your page and copying 
the hex codes into your CSS. 


This chart is maintained by Wikipedia at 
http://en.wikipedia.org/wiki/Web_¢olors. 
You'll also find many others by searching 


for “HTML color charts.” 


Try out the decorative 
name to see if it works a .—.- ep 
atross browsers. If it Pare 


doesn't, then use the hex 
tode instead. 


there are no > 
b Questions 


pum 


Q: | heard that if | don’t use web-safe colors, my pages will 
never look right on other browsers. Why haven’t we talked about 


web-safe colors? 


A: Back in the early days of web browsers, few people had 
computer screens that supported a lot of colors, so the web-safe 
palette of colors was created to ensure that pages looked consistent 


on most displays. 


Today the picture has changed drastically and most web users have 
computer displays that support millions of colors. So, unless you have 
a special set of users that you know have limited color displays, you 
can pretty much count web-safe colors as a thing of the past. 


Q: | know how to specify colors now, but how do | choose 
font colors that work well together? 


ree 
ee soe ie moe Ge te 
a | 


styling with fonts and colors 


fa eee Vere 


REP maa 1 rome = 


faa ELE 
a 
a, avr pach ies 
Bev iri 2 S2P) ar on 


fo FP Oe ee 
SP ee eh ee 
Pr rae oe ee 
OF Rb oe 
OP Fe ee er es 
he on 
ft Paar Bek aed bad 
OP wen or eer 
POP aT ae ee 
27 Pi ea a cee 
Pert mind bap 
or 
2 Pe oe ee 
A Se BH ie 
Pa am WU rer pas. ves 
Meret eT IES sae ban 
d pattie 1] 

PEELS Bay at ea omen en 
Sa oe aes 


ra 
ciel fe ie eee 


OP ee 
Le ee | 
Fo eel fe jy 
fe in 


2 Ml Sf es ee ee 
ee tr 
OP re er ee 


A: It would take an entire book to answer that question properly, 
but there are some basic guidelines to selecting font colors. The 

most important is to use colors with high contrast for the text and 

the background to aid readability. For instance, black text on a white 
background has the highest contrast. You don’t always have to stick 
with black and white, but do try to use a dark hue for the text, and a 
light hue for the background. Some colors, when used together, can 
create strange visual effects (like blue and orange, or red and green), 
so try your color combinations out on some friends before launching 
them on the world. 


Q: I’ve seen hex codes like #cb0; what does that mean? 


A: You're allowed to use shorthand if each two-digit pair shares 
the same numbers. So, for instance, #ccbb00 can be abbreviated 
#cb0, or #11eeaa as #1ea. However, if your hex code is something 
like #ccbb10, then you can’t abbreviate it. 
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put your hex skills to the test 


Crack the Safe Challenge 


Dr. Evel’s master plans have been locked away inside his personal safe and 
you've just received a tip that he encodes the combination in hex code. In fact, 
so he won't forget the combination, he makes the hex code the background 
color of his home page. Your job is to crack his hex code and discover the 
combination to the safe. To do that, simply convert his web color into its red, 
green, and blue decimal values, and you'll have the right-left-right numbers of 
his combination. Here’s the background web color from his home page: 


body { 
background-color: #b817e0; 
} 


Crack the code, and then write the combination here: 


RIGHT RIGHT 
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styling with fonts and col 


Back to Tony’s page...were going to make the 
headings orange, and add an underline too 


Now that you know all about color, it’s time to add some color to Tony’s web page. He wanted 
orange, and he’s going to get orange. But rather than making all his text orange—which would 
probably be unattractive and hard to read against a white background—we’re going to add a subtle 
splash of color in his headings. The orange is dark enough that there is good contrast between the 
text and the background, and by color-coordinating with the orange in the photos (Tony’s shirt), 
we’re creating a color relationship between the headings and the photos that should tie the images 
and text together. And just to make sure the headings stand out and create separation between 

the journal entries, we’ll also add an underline to each heading. You haven’t seen how to add an 
underline yet, but let’s do it, and then we’ll look at more about text decorations. 


Here are all the changes in the CSS. Make these changes in your “journal.css” file. 


@font-face { 

font-family: "Emblema One"; 

sre: url ("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne- 
Regular.woff"), 

url ("http: //wickedlysmart.com/hfhtmlcss/chapter8 /journal/EmblemaOne- 

Regular.ttf") ; 
} 
body { 

font-family: Verdana, Geneva, Arial, sans-serif; 


font-size: small; 
} We've going to make both <hl> and <h2> orange, so 


RL we've putting the color property in a shared rule. 
hl, h2 { 


color: #cc6600; aan Herve’s the hex code for the orange Color Tony 


text-decoration: underline; wants, otherwise known as rgb(@0%, 40%, O'R). 
} a 
find here’s the way we create an 
dee underline. We use the text-decoration 
ont-fauliys *Eabidad Gu, oane-cecie: property and set it to underline. 


font-size: 220%; 


Notice that we created one new rule for both 
the <hl> and <h2> headings. This is a good 
ae thing to do b it reduces duplication. 
font-weight: normal; nd, o because it redu P 
font-size: 130%; 
} 


blockquote { 
font-style: italic; 
} 
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testing heading colors 


Test drive Tony’s orange headings 
RET ene 


Once you’ve made the changes to your “journal. eR Oe fre earned es =r 
css” file to add the color property to the h1, h2 rule, 


reload the web page and check out the results. Seqway'n CsA 


“ - es 


Docurmining or bop apsued Em US on ey worry oan Geogr! 


Fuguiet 20, 2012 


Now both <hl> and <h2> headings 
are orange. This ties in nicely with 
Tony's orange theme and shirt. 


Mécd) 0 pees HO) efi leo dy, ee) 0 posed Ehrough aoe 
hei plies on A ey: 
1. Walle Walia, WA 


The headings ave also set off further with underlines. 2. maple city 10 


Hmmm...we thought this would be a 900d way to Bas gli 7 
distinguish the headings, but actually they seem to look t Ne en 


a little too much like clickable links, since people tend to nily'L4, 2012 
think anything underlined in a web page is clickable. 


C ey aor Burial Shee ap le or oe ce of the road Goda: 


Parry cart, 

Aft yeu can) ea, 
dap pet pou, 

oh Gaye, 

fT chemetr, 


So, underlines may have been a bad choice.  dAttidyt sweet be pubiaiingy ay ce, 
Let’s quickly look at some other text 
decorations, then we'll reconsider these 
underlines in the web page. 


finn #20 


What do all these colors have in common? Try each one in a web page, say as a font 
color, or use your photo editing application’s color picker to determine what colors 
they are by entering the hex code into the dialog box directly. 


#111111 #444444 #777777 #aaaaaa #dddddd 
#222222 #555555 #888888 #bbbbbb #eeeeee 
#333333 #666666 #999999 #cccccc 
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styling with fonts 


Everything you ever wanted to know about 
text decorations in less than one page 


Text decorations allow you to add decorative effects to your text like underlines, overlines, 


and linethroughs (also known as a strikethrough). To add a text decoration, just set the 


text-decoration property on an element, like this: 


Pes { i 
text-decoration: line-through; 


} 


This rule will cause the 
<em> element to have a 
line through the middle 
of the text. 


You can set more than one decoration at a time. Say you want underline and overline at 


the same time—you specify your text decoration like this: 


em { 


text-decoration: underline overline; 


\ This rule results in the <em> 
element having an underline 


AND overline. 


And if you have text that is inheriting text decoration you don’t want, just use the value “none”: 


em { 
text-decoration: none; 


there,are no ; 
b Questions 


pum 


Q: So if | have two different rules for an <em>, and one 
specifies overline and the other underline, will they be added 
together so | get both? 


A: No. You need to combine the two values into one rule to get 
both text decorations. Only one rule is chosen for the text-decoration, 
and decorations in separate rules are not added together. Only the 
rule that is chosen for the text-decoration styling will determine the 
decoration used, so the only way to get two decorations is to specify 
them both in the same text-decoration declaration. 


Q: I’ve been meaning to ask why the color property isn’t 
called text-color? 


<— With this rule, <em> elements 


will have no decoration. 


A: The color property really controls the foreground color of an 
element, so it controls the text and the border color, although you can 
give the border its own color with the border-color property. 


(): | like the linethrough decoration. Can | use it on text I’m 
editing to indicate things that need to be deleted? 


A: You could, but there’s a better way. HTML has an element 

we haven't talked about called <del> that marks content in your 
HTML as content that should be deleted. There is a similar element 
called <ins> that marks content that should be inserted. Typically 
browsers will style these elements with a strikethrough and underline, 
respectively. And with CSS, you can style them any way you like. By 
using <del> and <ins>, you are marking the meaning of your content 
in addition to styling it. 
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using a border instead of an underline 


Removing the underline... 


Let’s get rid of that confusing underline and instead add 
a nice bottom border like we did in the lounge. To do 

m hl> and 
that, open your “journal.css” file and make these changes Add a border on the botto an eae a 


to the combined h1, h2 rule: <hL> elements. You Can almost vead this like 


Enolish: “sdd a thin, dotted line with the 


hl, h2 { Color £48888 on the bottom border”... 


color: #cc6600; 
border-bottom: thin dotted #888888; 


} i ae 
Delete the text decoration. 


b] <4 * ” i ae 
And here s how our new underline looks— woe, Su yeacibaaeik arian 
definitely more stylish and less confusing | Ee chemo aranypoureal ter * ay 
than a text decoration underline. <———— a ee. 


In the next chapter, we are going to go into 
borders in detail. Hang on, we've almost there! 


_> Segway'n USA 


Now we've got borders under the <hl> 
Documerting my trip arcund the US an rit wary cw Seqevay! 


and <h2> element, not underlines. oe 
| August 20, 2012 


vs extend all the way 
ather than 
You'll find 


Notite that borde 

to the end of the page, © 

just under the text. Why? 
the next chapter. 


out in Weil T peade it 1200 mites already, ard | passed through sorme 


Inkergeting placis Cn the vary: 


Walbs Welle, ne, 

Mage City, ID 

Bourititil, .T 

Last Chance, OO 

Truth or Consequences, MM 
» Why, Ad 


| July 14, 2012 
Isaw some Burma Shave style signs on the side of the road today: 


Passing cars, 

Wear peta cir! sia, 
May ger you, 

A glimpse, 

OF e@bearmity. 


(Tdefinitely wort be passing ary cars, 


SPP EE 
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as BULLET POINTS 


styling with fonts 


CSS gives you lots of control over the look of your 
fonts, including properties like font-family, font- 
weight, font-size, and font-style. 


A font-family is a set of fonts that share common 
characteristics. 


The font families for the Web are serif, sans-serif, 
monospace, cursive, and fantasy. Serif and sans- 
serif fonts are most common. 


The fonts that your visitors will see in your web 
page depend on the fonts they have installed on 
their own computers, unless you use Web Fonts. 


It's a good idea to specify font alternatives in your 
font-family CSS property in case your users don’t 
have your preferred font installed. 


Always make the last font a generic font like serif 
or sans-serif, so that the browser can make an 


appropriate substitution if no other fonts are found. 


To use a font that your users may not have 
installed by default, use the @font-face rule in 
CSS. 


Font sizes are usually specified using px, em, %, 
or keywords. 


If you use pixels (“px”) to specify your font size, 
you are telling the browser how many pixels tall to 
make your letters. 


em and % are relative font sizes, so specifying 
your font size using em and % means the size of 
the letters will be relative to the font size of the 
parent element. 


Using relative sizes for your fonts can make your 
pages more maintainable. 


Use the font size keywords to set the base font 
size in your body rule, so that all browsers can 
scale the font sizes if users want the text to be 
bigger or smaller. 


You can make your text bold using the font-weight 
CSS property. 

The font-style property is used to create italic or 
oblique text. Italic and oblique text is slanted. 


Web colors are created by mixing different 
amounts of red, green, and blue. 


If you mix 100% red, 100% green, and 100% blue, 
you will get white. 


If you mix 0% red, 0% green, and 0% blue, you will 
get black. 


CSS has 16 basic colors, including black, white, 
red, blue, and green, and 150 extended colors. 


You can specify which color you want using 
percentages of red, green, and blue, using 


numerical values of 0-255 for red, green, and blue, 


or using a color’s hex code. 


An easy way to find the hex code of a color you 
want is to use a photo editing application’s color 
picker or one of many online web tools. 


Hex codes representing colors have six digits, 

and each digit can be from 0-F. The first two digits 
represent the amount of red, the second two the 
amount of green, and the last two the amount of 
blue. 


You can use the text-decoration property to create 
an underline for text. Underlined text is often 
confused as linked text by users, so use this 
property carefully. 
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a crossword on 


and 


HTMLecross 


You've absorbed a lot in this chapter: fonts, color, weights, and styles. It’s 


time to do another crossword and let it all sink in. 


1 2 


Across 


1. Similar fonts are grouped into__—. 

3.Use the ____ rule in CSS to load fonts from the Web. 
4. When you specify fonts in the font-family property, you 
are specifying _—«. 

6. Considered cleaner and easier to read on a computer 
display. 

8. You can specify fonts in terms of pixels, em, or___. 
12. Underline and linethrough are examples of text___ 
13. em and % are both this kind of size. 


Down 


1. Font family almost never used in web pages. 

2. Browser that doesn’t handle pixel font sizes well. 

5. Hex codes use this many different digits. 

7. Fonts with little barbs on them. 

9. Colors like #111111 through #EEEEEE are all shades 
of ' 

10. Controls how bold a font looks. 

11. Element that can be used to mark text for deletion. 
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styling with fonts and colors 


Font Magnets Solution 


Your job was to help the fictional fonts below find their way 
home to their own font family. You moved each fridge magnet 
into the correct font family. Check your answers before you 
move on. Here's the solution. 


Monospace family Fantasy family 
Messenget 
Cursive family 


Sans-serif family 


Iceland | Angel | 
Serif family 


Hl 
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exercise solutions 


Crack the Safe Challenge Solution 


Dr. Evel’s master plans have been locked away inside his personal safe and 
you've just received a tip that he encodes the combination in hex code. In fact, 
so he won't forget the combination, he makes the hex code the background 
color of his home page. Your job is to crack his hex code and discover the 
combination to the safe. To do that, simply convert his web color into its red, 
green, and blue decimal values, and you'll have the right-left-right numbers of 
his combination. Here’s the background web color from his home page: 


body { 
background-color: #b817e0; 
} 


Crack the code, and then write the combination here: 


(i *16)+¢6= (*1b+7= (4 * 1b) +0= 


RIGHT 23 RIGHT 
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styling with fonts and colors 


i 
Ml tion #111111 


222222 
What do all these colors have in common? [ s—~ 


You can try each one in a web page, or use siebieigales 


the color picker to determine what colors #444444 . 
they are, by entering the hex code into the #555555 All colors that use just one 
dialog box directly. #666666 digit in their hex Codes 
#777777 ave grays; from very dark 
#888888 (almost black) to very light 
#999999 (almost white). 
#aaaaaa 
#bbbbbb 
#ceccccc 
#dddddd 


#eeeeee 


HTMLeross Solution 


ON TF AM?*IL IE S 
N 
© FONTFACE 
E 
“ALTERNATIVES 
N I 
“Ss AN’S S ER I F Xx 
E T T 
“PER CENT E 
I Xx E 
F P °G WwW N 
L R E 
'D DECORATION 
E R y 6 
RIE|LIJA/T/I|VIE H 
R T 
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9 the box model 


* 


Getting Intimate « 
* with Elements 


I think we'd be a little 
closer if it weren't for all 
the padding, margins, and 
this darn table. 


To do advanced web construction, you really need to know 
your building materials. In this chapter we're going to take a close look 

at our building materials: the HTML elements. We’re going to put block and inline 
elements right under the microscope and see what they’re made of. You'll see how 
you can control just about every aspect of how an element is constructed with CSS. 
But we don’t stop there—you’ll also see how you can give elements unique identities. 
And, if that weren’t enough, you’re going to learn when and why you might want to use 


multiple stylesheets. So, turn the page and start getting intimate with elements. 
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what we’re going to do with the lounge 


The lounge gets an upgrade i 


ad 7s 44s (hii 


You’ve come a long way in eight chapters, and so , 
has the Head First Lounge. In fact, over the next < There's a new graphic for 
two chapters, we’re giving it a total upgrade with ounde the header of the page. 


all new content for the main page and restyling it 
from scratch. And, just to entice you, we’re going 


to give you a little sneak peek before we even Welcome to the Head First Lounge 

get started. Check this out—on this page, you'll ih i tgs ah eave lh plored aba lenin 
find the new unstyled lounge page with all the le iy 

new content. On the next page, you'll find the prada ledge ede aoe ail ag aap re ta eld ne 


stylized version that we’re going to create by the Dnt Ser oer ooeg bananas eran pial atone 


Fo pe oi ge, oe ed oo ey eS oe ee, Se ey 
end of the next chapter. em et he pe ye mop: Aey es es ame eo be a rch 
ae cea A, il) Aces Ac pg aaa ce ay pt ey cel eae 


Datiees Bis Rao 

Re ee eee eee 
weds re cer gers ts ees dee Ge, (hd eed ee ep ee ert eh oe de 
(dah Peak Si rams ate ec ta ld na a ges Sng: i nt cad 2 ic te deg kr cd 


. met mee am tee Eagan lk A ee end ed pel Lin thn ecg dp 
The lounge guys have supplied a SM oh een 2 es Be ect a ay " 


lot of new text deseribing, the er i-aipie wre PRaer frby rye leaybraley sar-aedee pieey Apatadar ieieersiaterhatenea 
. ee ee rom 
lounge and what it offers. sel jb a —r 


Wpekly Elivir Specials 


: 
‘Late Biter 


iso tum ees ein Whi we i nse reeds nt. ie shee pebeteyeaS yeeety e r Pereed od ieareeen i 
a Cree Sr ed SE ep ye ye, poy ll dy ered ad 


They've included a set of a | | 


elixir specials for the week. SX <3 


Chal Chir 


ee ee ee nee eee ry 
= ca 


ist Bias eee 


Piet: > inten mln’ Tg ta iz ks Dee: laa nm et Sebel: cei ced feed Vind aT pee 
And they even let visitors sample some of the Ve ea il ae, er en a, 


musié that is played in the lounge each week, a sy rm Lee a tid omni 


Common request of customers. ‘Wert’ playing at the Eroampe 


Peps regen eae ered eg ey ee plang ad lm eng | aed ee eis, oy ped eT Ped fog pee or eeep a fi 
Kemer of: pln» peared ormate . Emjer . 


= Pecinia er,  ecl Ce 
ihe fe Miele, Agen. 7 
= fend LTE, belew 


Finally, they've got some legalese in the Ee piel, en dn ee 


Ailes ow Aap, ki Dh 
footer of the page with a copyright. “ss ME ost Pies Tange 


A coe eel el ee ey ee 
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SS chest pel nome tee 


We've got headings that match the site’s 
Firs’ color theme, an aquamarine. The fonts 
Lounge are also a very readable sans—sevit. 


Welcome te the Heed First Lounge 


TOR Ba es Les ph ea Ce pp eae! 2 = fess 
i aren oe obec ePoring of ee. doe, eH coffe, oe re 
a ep ey eS rey ee a ee Py et 
freee) eet ppier eet ter beret ev Prep need bat ey eget 


This paragraph has been highly stylized, 
which helps set it off from the text and 
gives the page an attractive look. |t also 


Ghirieg Pour Bar af ee here, roe 7 air gee eee 2 eee ed 
Pec pouers. eg tee eee eed eden an ete dice on oe yo 


[beeps gare levers pantalones ee Ubiiaaiiiaeiaa looks like the font is a serif font, which is 
ee ee Tha aS Hg Deere, different from the main text. 


The elixirs have been 
dramatically restyled into an 
appetizing display of drinks. 


GL LT a) ee, Le 0 a Lee te}: ee recite oat che 
Dios met 2d dee De Becee oor pation fki-teereed agg Hang By 
Gases Foa, Oo [ee Pee ee rogers Of epee) eh vir?! bee Ler opi eke aiplein) ted earned 


ere bee, Feu ner byeee peer eiety sie begee bh ree begs right te seo 
UR esac em og mae aa gs a ee a, A Meh Cea Pa i j 
PS a < 
nie po inci wih a zis paris coh. The elixirs have also been moved over to 
ee em ee ee the side. How did that happen? 

Fer Tae VE ECR Pg OT A, OTR 


Sep? Aerie te pa ee ere ee ee. 2 ev ee Hieck Greate One 
ore aed pols ae eee, 

"hy ae mod eure eee 

7 

Whats planing ot Uh Lounges aide, reach kin Siwck 

Sy bie ed he Lie 
frre Peeper qed ares Te ee ae Pg Ge. are, SHPSRRL = wll 
Freee ee bert fercyes, oe lee 9 ee eg es Pe ie, eed ey Pee ere Oe “ 
Benjy Vad cin mang prea Ee the: 

al 


mn cs “a The new and improved, 
ultra-stylish lounge 


= Boer 2, Tl a 
= Le Aa Pret We oe A, gee 
6 Boer fe anes. Brinn 
Not too shabby. Now the lounge design 
might be a tad on the, well, “ultra-stylish” 
side for you, but hey, it zs a lounge. And 


we’re sure that you can see this design is 


The muse CDv and tics find the footer is starting to look downright sophisticated— 
are styled now too. centered and displayed just think what the same techniques could 
in a small font. do for your pages. Well, after this chapter 


and the next, designs like this are going to be 
easily within your reach. 
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starting with simple styles 


Setting up the new lounge 


Before we start the major construction, let’s get familiar with the new lounge. 


Here’s what you need to do: 


2) 


3) 


Take a look at the “chapter9/lounge” folder and you'll find the file “lounge.html”, 
with all new content. Open the file in your editor and have a look around. Everything 
should look familiar: head, paragraphs, a few images, and a list. 


You’re going to spend most of this chapter adding style to this HTML, so you need a 
place for your CSS. You’re going to create all new styles for the lounge in the stylesheet 
file “lounge.css”, so you'll find your <link> element in the <head> of “lounge.html” is 
still there, but the previous version of “lounge.css” stylesheet is gone. 


<link type="text/css" rel="stylesheet" href="lounge.css"> 


Remember, this <link> element tells the browser to look for an external stylesheet called 
“lounge.css”’. 


Next, you need to create the new “lounge.css” in the “chapter9/lounge” folder. This file is 
going to hold all the new CSS for the new lounge. 


Starting with a few simple upgrades 


Now you're all ready to start styling the lounge. Let’s add a few 
rules to your CSS just to get some basics out of the way—like the 
font family, size, and some color—that will immediately improve 
the lounge (and give you a good review from the last chapter). So, 
open your “lounge.css” file and add the following rules. 


Here’s the default font 
j he page. 
body { size for the pag 
font-size: small; 
font-family: Verdana, Helvetica, Arial, sans-serif; 
} 
© We've Going, to go with a sans-serif font 
hl, h2 { family for the lounge. We've picked a few 
color: #007e7e; font. alternatives, and ended the declaration 
} nO with the generie sans-serif font. 
hi { We've going to set the color of the <hl> and <h2> 
Pontasiees Leos: elements to an aquamarine to match the glass in the logo. 
: \ 
h2 { Now let's get some reasonable heading sizes for <hl> and <h2>. 
font-size: 1303; lL Since we're setting two different sizes for these, we need separate 
} rules and can't add them to the combined rule for <hl> and <h2Z>. 


www.it-ebooks.info 


A very quick test drive 


Let’s do a quick test drive just to see how these 
styles affect the page. Make sure you’ve made all the 


changes; then save and test. 
Headings are now sans—serit 


and a ¢olor that matches 
the logo, creating a theme 
for the page: 


Paragraph text is also sans—sevif . > 


since every element inherits the 


<body>’s font—family property. 


The <h2> heading is also 
styled with a new Color and 
sans-serif, but a tad smalle 


We haven't applied any styles 
to the <h3>, so it just inherits 
the font—family property 
from <body>. 


One more adjustment 


We’re going to make one more adjustment to the 
lounge before we move on to start making some bigger 
changes. This adjustment involves a new property you 
haven’t seen before, but at this point, you’ve got enough 
experience under your belt that we’re not going to treat 
you with kid gloves every time a new property comes 
along. So, just jump in and give it a try. 

Here’s what we’re going to do: we’re going to adjust the 
line height of the text on the entire page so that there’s 


more vertical space between each line. To do that, we 
add a line-height property in the body rule: 


body { 


font-size: small; 


font-family: Verdana, Helvetica, Arial, sans-serif; 


line-height: 1.6em; 
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Mite Clair Speciale 
This link looks oddly out of place 
| with its default blue color. We'll 
k have to fix that (later). 
Longe Beoasa 


Pee Na a Pe a NR es a el A a, A Se 
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Increasing the line height of your text 
can improve readability. |t also gives 
You another way to provide contrast 
between different parts of your page 
(you'll see how that works in a bit). 


Pa 


Here we've changing the space between each line to |.bem— 
in other words, 1.6 times the font size. 


ra, 
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learning about line height 


Checking out the new line height 


As you might have guessed, the line-height property allows you to specify the 
amount of vertical space between each line of your text. Like other font-related 
properties, you can specify the line height in pixels, or using an em or percent 
value that’s relative to the font size. 


Let’s see what the effect of the line-height property is on the lounge. Make 
sure you add the line-height property to your CSS file and then save. You 
should see the line height increase when you refresh. rn. 


Using the line-height property, we've 


inereased the space between each line of Wedcure to the Head Pest Laurge 
text from the default to |.bem. Pha Pie Lean ye ent ae iP i eon 
Before : = rie pagers 
: rats ya 
Cera Four aoe OE es Norges, vi oe oS Me abe aed ees i a 
The lee Bed dg ea Beso Do vie dining Gaiperience: The cco carries vou mr nw jemi 
iro tte) ES OT ome Toon ecod cat And, dort Pongert, he low reper oon tinge yiegiogs sede we tena rare 
de ho at etre pear Soe aL Rd Puree, vie) ey Ge letra a! ambeat ded Pepe eed, leg PS 


t ihe lane bed Rg 0 eb ineasios bo year dinky experkence. The clicor sur ngleWd ya) with 
The OS AT OT SG To ered Bee Avie, BOE Monge, Tet liane eee tee vegies Borne 


The space between lines 
is Known as “leading, - 
(pronounced “Vedding, din 7 
the publishing, industry: 


The line-height property is inherited, so by 
setting it in the body, all the elements on the 
page now have a line height of |.bem. 


Try a few different values for line-height, like 200%, .5em, and 20px to see the 
effect. Which looks the best? The worst? Which is most readable? When you’re 
done, make sure you change the line-height back to 1.6em. 
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Getting ready for some major 
renovations 


After only a few pages of this chapter, you already have a ton of 
text style on the new lounge. Congrats! 


Now things are going to get really interesting. We’re going to 
move from changing simple properties of elements, like size, 
color, and decorations, to really tweaking some fundamental 
aspects of how elements are displayed. This is where you move 
up to the big leagues. 


But to move up to the big leagues, you’ve got to know the box 
model. What’s that? It’s how CSS sees elements. CSS treats every 
single element as if it were represented by a box. Let’s see what 
that means. 


Every box is made up of a 
e of CSS, every tontent area along with optional 


ectiv 
From the Pers? padding, border, and margins. 


element is a box 


The content area holds the 


instance). 


Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 

an elixir, or are here for an out-of- 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
| have a Blueberry Bliss Elixir on us. 


: yy. And Finally, an optional 
transparent margin 


Surrounds everything, 


All elements ave treated as boxes: 
paragraphs, headings, block quotes, 
lists, list items, and so on. Even inline 
elements like <em> and links are 


treated by CSS as boxes. 


content (text or an image, for 


i _ The content area is surrounded 
by optional transparent padding. 


Sn An optional border can be 


placed around the padding. 


you are here > 
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the box model up close 


A. closer look at the box model 


You’re going to be able to control every aspect of the box with 
CSS: the size of the padding around the content, whether or not 
the element has a border (as well as what kind and how large), 
and how much margin there is between your element and other 
elements. Let’s check out each part of the box and its role: 


What is the 


content area? 

Every element starts with some 
content, like text or an image, 
and this content is placed inside 
a box that is just big enough 

to contain it. Notice that the 
content area has no whitespace 
between the content and the 
edge of this box. 


What is the padding? 


Any box can have a layer of padding 
around the content area. Padding is 
optional, so you don't have to have it, 


We've drawn an edge 
around the content 
area just so You know 
how big it is. But ina 
browser, there is never 
a visible edge around 
the content area. 


The content area holds the element’s 
content. |+t’s typically just big enough 
to hold the content. 


V 


, Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 


an elixir, or are here for an out-of- 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 


| to every detail. If you’re not fully satisfied 


have a Blueberry Bliss Elixir on us. 


The browser adds optional padding around 
the content area. 


but you can use padding to create visual 


whitespace between the content and 
the border of the box. The padding 
is transparent and has no color or 


decoration of its own. 


Our guarantee: at the lounge, we're 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you're just 
stopping by to check in on email over 


an elixir, or are here for an out-of- 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 


Using CSS, you're going to be able to control the width of 
the padding around the entire content area, or even control 
the padding on any one side (top, right, bottom, or left). 
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the box model 


Notite that the padding 


separates the content area 
from the border. 


What is the border? 


Elements can have an optional 
border around them. The border 
surrounds the padding and, 
because it takes the form of a 
line around your content, provides 
visual separation between your 
content and other elements on the 
same page. Borders can be various 
widths, colors, and styles. 


What is the margin? 
The margin is also optional and 
surrounds the border. The 
margin gives you a way to add 
space between your element 
and other elements on the same 
page. If two boxes are next to 
each other, the margins act as 
the space in between them. Like 
padding, margins are transparent 
and have no color or decoration 
of their own. 


Border / 


wo : : 
; the-ordinary dinner, you'll find our 
Padding, ~_ By | knowledgeable service staff pay attention 


Content 


fi es / a | i 27S 


Using CSS, you're going to be able to control 
the width, color, and style of the border. 


J 


Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 


t/every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 


Using CSS, you've going to be able to control 
the width of the entire margin, or of any 
particular side (top, right, bottom, or left). 


Our guarantee: at the lounge, we're 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 

an elixir, or are here for an out-of- 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 
to every detail. you're not fully satisfied 
have a BlueberYy bliss Elixir on us. 


This is the entire element. We have a Content 


tontent area, surrounded by optional 
padding, surrounded by an optional border, 
surrounded by an optional margin. Border 


Padding ee 
ron 
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how boxes can be configured 


What you can do to boxes 


The box model may look simple with just the content, some padding, a 
border, and margins. But when you combine these all together, there 
are endless ways you can determine the layout of an element with its 
internal spacing (padding) and the spacing around it (margins). ‘Take a 
look at just a few examples of how you can vary your elements. 
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‘Our guarantee: at the lounge, we're 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you're just 
stopping by to check in on email over 

an elixir, or are here for an out-of 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 
to every detail. If you're not fully satistied| 
have a Blueberry Bliss Elixir on us. 


‘Our guarantee: at the lounge, we're 
committed to providing you, our guest, 
| with an exceptional experience every 
time you visit. Whether you're just 
stopping by to check in on email over 
an elixir, or are here for an out-of 
the-ordinary dinner, you'll find our | 
knowledgeable service staff pay attention 
to every detail. If you're not fully satisfied 
have a Bhucerry Bliss Elixir on us 


Our guarantee: at the lounge, we're 
Jcommitted to providing you, our guest, 
Iwith an exceptional experience every 
time you visit. Whether you're just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you'll find our 

|] knowledgeable service staff pay attention 


to every detail. If you're not fully satisfied ff 


have a Blueberry Bliss Elixir on us. 


‘Our guarantee: at the lounge, we're 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you're just 
stopping by to check in on email over 
an elixir, or are here for an out-of 


the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 
to every detail. If you're not fully satislied| 
have a Blueberry Bliss Elixir on us 


Chapter 9 


You ean style a box to 
have padding, a border, 


and a margin. 
You an have solid 


borders, thick or thin. 


Ov no border at all 


<a 


Ov just 
padding and 
a border 
Or choose from 


eight different 
styles of borders, 


like dashed ers 


= 
Ov just a 


border 


Or tolor Your 


borders << 


Ova margin with 
no border and no 


padding 


Ov even create 
rounded Corners 
on Your borders 
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jur guarantee: at the lounge, we're 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you're just 
stopping by to cheek in on email over 

an elixir, or are here for an out-of 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 
to every detail. If you're not fully satisfied 
have a Blueberry Bliss Elixir on us. 


‘Our guarantee: at the lou 

committed to providin, 

with an exceptional experience every 
time you visit. Whether you're just 
stopping by to check in on email over 

an clixir, or are here for an out-of- 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 
to every detail. If you're not fully satisfied 
have a Blueberry Bliss Elixir on us. 


Our guarantee: at the lounge, we're 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you're just 
stopping by to check in on email over 

an elixir, or are here for an out-of 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 
to every detail. If you're not fully satisfied 
have a Blueberry Bliss Elixir on us. 


Jur guarantee: at the lounge, we're 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you're just 
stopping by to check in on email over 
an elixir, or are here for an out-of 
the-ordinary dinner, you'll find our 
Jmowledgeable service staff pay attention 
to every detail. If you're not fully satisfied 
have a Blueberry Bliss Elixir on us 


yar guarantee: at the lounge, we're 
committed to providing you, our gucst, 
with an exceptional experience every 
time you visit. Whether you're just 
stopping by to check in on email over 
an elixir, or are here for an out-of 


the-ordinary dinner, you'll find our 
knowledgeable service staff’ pay attention 
to every detail. If you're not fully satisfied 
have a Blueberry Bliss Blixir on us. 


‘Our guarantee: at the lounge, we're 
committed to providing you, our guest, 


with an exceptional experience every 
time you visit, Whether you're just 
stopping by to check in on email over 

an elixir, or are here for an out-of- 
the-ordinary dinner, you'll find ow 
knowledgeable service staff pay attention 
to every detail. If you're not fully satislied| 
have a Blueberry Bliss Elixir on us. 


nr guarantce: atthe lounge; were 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit, Whether you're just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 
to every detail. If you're not fully satisfied| 
have a Blueberry Bliss Elixir on us. 


Our guarantee: at the lounge, we're 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you're just 
stopping by to check in on email over 

an elixir, or are here for an out-of 
the-ordinary dinnes, you'll find our 
Jmowledgeable service staff pay attention 
to every detail. If you're not fully satistied| 
have a Blueberry Bliss Elixir on us 


You can even tontrol 
width and height ina 
variety of ways: Here, 
the content area has 
been made wide. 


With CSS, you can 
tontrol padding on any 
side of the content 
area. Here we've got a 
lot of left and right 
padding. 


KJ 


And here there’s a lot of 
top and bottom padding, 


And here’s a lot of 
left and right margin. 


And here the 
content is 
offset to the 
bottom right 
with padding on 
the top and left. 


Our guarantee: at the lounge, we're committed to providing 
Jyou, our guest, with an exceptional experience every time 
Jyou visit. Whether you're just stopping by to check in on 


Jemail over an elixir, or are here for an out-of-the-ordinary 
dinner, you'll find our knowledgeable service staff pay 
Jattention to every detail. If you're not fully satisfied have a 
Blueberry Bliss Elvi 


You have the same 


level of eontrol over 


the margins. Here 


there's a lot of top 
and bottom margin. 


And as with padding, 
you can specify all 
sides independently 
to create margins 


like this. A 


Our guarantee: 
at the lounge, 
we're committed 
to providing you, 
our guest, with 

an exceptional 
experience every 
time you vis 
Whether you're 
just stopping by to 
check in on email 
over an elixir, or 
are here for an 
out-of-the-ordinary 
dinner, you'll find 
our knowledgeable 
service stall pay 
attention to every 
detail. If you're not 
fully satisfied have 
a Blueberry Bliss 
Elixir on us. 
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‘Our guarantee: at the lounge, we're 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you're just 
stopping by to check in on email over 

an elixir, or are here for an out-of 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 
to every detail, If you're not fully satislied| 
have a Blucberry Bliss Elixir on us, 


yar guarantee: at the lounge, were 
committed to providing you, our guest, 
‘with an exceptional experience every 
time you visit, Whether you're just 
stopping by to check in on email over 


an elixir, or are here for an out-of- 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 


Our guarantee: at the lounge, we're 
committed to providing you, our guest, 
With an exceptional experience every 
time you visit, Whether you're just 
stopping by to check in on email over 

an elixis, or are here for an out-of 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 


area is tall 
but thin. 


you are here >» 
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some details about 


nar no 


Questions 


pum 


©. It seems like knowing this box 
stuff would be important if | were 


someone creating the software for a 
web browser, but how is this going to 
help me make better web pages? 


A: To go beyond simple web pages 
that use the browser’s default layout, 
you need to be able to control how 
elements sit on the page, as well as the 
relative position of other elements. To do 
that, you alter various aspects of each 
element's padding and margins. So to 
create interesting web page designs, 
you definitely need to know something 
about the box model. 


Q: What’s the difference between 
padding and margin? They seem like 
the same thing. 


A: The margin provides space 
between your element and other 
elements, while padding gives you extra 
space around your content. If you have 
a visual border, the padding is on the 
inside of the border and the margin on 
the outside. Think of padding as part of 
the element, while the margin surrounds 
your element and buffers it from the 
things around it. 


: | know they are all optional, but 
do you need to have padding to have 
a border or a margin? 


A: No, they are all totally optional 
and don’t rely on each other. So you 
can have a border and no padding, or a 
margin and no border, and so on. 
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: Pm not sure | get how elements 
get laid out and how margins fit into 
that. 


A: Hold that thought. While you're 
going to see a little of how margins 
interact with other elements in this 
chapter, we'll get way into this topic 
in Chapter 11 when we talk about 
positioning. 


: So other than size, it sounds 
like | can’t really style padding and 
margins? 


A: That's basically right. Both are 
used to provide more visual space, and 
you can’t give the padding or margin a 
direct color or any kind of decoration. 
But because they are transparent, they 
will take on the color of any background 
colors or background images. One 
difference between padding and margins 
is that the element’s background color 
(or background image) will extend under 
the padding, but not the margin. You'll 
see how this works in a bit. 


: Is the size of the content area 
determined solely by the size of the 
content in it? 


A: Browsers use several rules to 
determine the width and height of the 
content area, and we'll be looking at that 
more in-depth later. The short answer is 
that while the content is the primary way 
the size of an element is determined, 
you can set the width and height 
yourself if you need control over the size 
of the element. 
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Hey guys, love the shop talk, 
really do. But did you forget 
you were in the middle of 
renovating the lounge? 


the box model 


Meanwhile, back at the lounge... 


We do have our work cut out for us on the lounge page, so let’s get back to it. Did you notice 
the blue, stylized paragraph when you looked at the final version of the lounge page in the 
beginning of the chapter? This paragraph contains text with the lounge’s guarantee to their 
customers, and obviously they want to really highlight their promise. Let’s take a closer look 
at this paragraph, and then we'll build it. 


The paragraph has a 
pies background. The text looks serif, 


not sans-serif, and 
There's even a al . 


graphic in the 
paragraph: 


oy ee 7 
it's italie. -e eLieoe : sl 


S 


Notice the The text is offset 
Paragraph looks from the border. atenditarler states elie a eee Bo 
indented a bit. dase bs Sv han ssp’ ena derored aoa ar Poa in Pa 


eee fe Dee ee ee ee, ee ee ee 
CP An, re sn aye em pepe LA eee Leap pr 
Sei) oe eT oe ee 


There’s a stylish, 
vragged—looking border. 


bee CaS GS ee eee 
for rea en eae Se a ae ae de Ad en CS 
dice dees eH be Gio cho em Pi rhe ded hadi 
i i PS ee 


WHITE Drying Bf ihe Lounge 


Aare (eeeeenis eeved sire: oy er ee wy ee ee el ne oats 
a eee ef ba eee, Se eee 8 le erg oe a Ses 
fs 


Es 
rt ed ee ee ee ee eee 
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working through padding, borders, and margins 


your pen 


See if you can identify the padding, border, and margins of this paragraph. 
Mark all the padding and margins (left, right, top, and bottom): 


don't forget, the lounge offers free wireless access to the 
Internet, so bring your laptop. 


But that's not all; at night, join us in the backroom as our 
resident DJ spins a choice selection of trance and drum&bass 
beats across our spacious tiki-themed dance floor. Or just han 


ig BRAIN 
POWER 


Before going on to the next page, think about how you might 
use padding, borders, and margins to transform an ordinary 
paragraph into the “guarantee paragraph.” 
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Creating the guarantee style 


Let’s get started by making a few small changes to the style of the guarantee 
paragraph just to get a feel for how the paragraph’s box is set up. To do that, 
you're going to add the paragraph to a class called guarantee so that you can 
create some custom styles for just this paragraph. You’re then going to add a 
border along with a little background color, which will let you see exactly how 
the paragraph is a box. Then we’ll get to work on the rest of the style. Here’s 
what you need to do: 


© Open your “lounge.html" file and locate the paragraph that starts 
“Our guarantee". Add a class attribute “guarantee” to the element like this: 


Add the class attribute with a value of “guarantee”. 
Remember, a class will allow you to style this paragraph 
independently of the other paragraphs. 


<p class="guarantee"> 


Our guarantee: at the lounge, we're committed to providing 


you, our guest, with an exceptional experienc very time you 
visit. Whether you're just stopping by to check in on email 
over an elixir, or are here for an out-of-the-ordinary dinner, 


you'll find our knowledgeable service staff pay attention to every 


detail. If you're not fully satisfied, have a Blueberry Bliss 


Elixir on us. 
</p> 

© Save your “lounge.html" file and open the “lounge.css" file. You're going 
to add a border and background color to the guarantee paragraph. Add 
the following CSS to the bottom of your stylesheet and then save. 


The first three properties add a border to any 


element that is in the guarantee Class. So far, 
——— that’s just this paragraph. 


sqURTAnE SS: <1 We've making the color of the border black... 
border-color: black; Le 
..and one pixel thick... 
border-width: 1px; << 
border-style: solid; <—____ «and solid. 
background-color: #a7cece; We're also giving the element a background Color, which 
} K Uv will help you see the difference between padding and 


margins, and make the guarantee look good. 
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a first cut on paragraph styling 


A test drive of the paragraph border sis 


Reload the page in your browser, and you'll now see the guarantee 
paragraph with an aquamarine background and a thin black border 
around it. Let’s examine this a little more closely... 


It doesn't look like the paragraph has any 
padding around the content—there is no 
space between the text and the border. 


— 


the lounge and adding an extra c/imension to your dining experience. The decor surrounds you with 
the relaxing sentiments of sight from eras past. And, don't forget, the lounge offers free wireless 


access to the Internet, so bring /your laptop. 


But that's not all; at night, Zoin uvin the backroom as our resident DJ spins a choice selection of 
trance and drum&bass 6 pore 24ross our Spacious tiki-themed dance floor. Or just hang out in one (/f 


There isn't a noti¢eable margin between 


But there does seem to be a margin on the top the left and right edges of the 
and bottom of the paragraph element. paragraph and the browser window edges. 


Here’s what the paragraph would look like if we drew it 
1 di : 
as a box model diagram We've got. a top and bot:tom margin 


Our guarantee: at the lounge, we’re committed to providing you, our guest, with 
an exceptional experience every time you visit. Whether you’re just stopping by to 
check in on email over an elixir, or are here for an out-of-the-ordinary dinner, you'll 


find our knowledgeable service staff pay attention to every detail. If you’re not fully 
satisfied have a Blueberry Bliss Elixir on us. 


But the left and right And we have a border, but it’s Veeane up against the ree’ which 


margins are very small means the padding is set very small, or there’s no padding at all. 
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Padding, border, and margins for the guarantee 


Now that you’ve seen how the padding, border, and margins are 
currently set on the guarantee paragraph, let’s think more about 
how we’d actually like them to look. 


We definitely need some padding 
all around the content. 


Geer Forget, the Guage offers re Wie aoe 
Terre, do ing your bi pe 


Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you're just 
stopping by to check in on email over 

an elixir, or are here for an out-of- 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied) 


c have a Blueberry Bliss Elixir on us. 
Bar irae rear ey ae eg Pe | pai oe tee beter 2 y 
Hew OF are ong saben of reine ord devon. 
_ beset ease napa sey citys bi -tree eae charge Maey, Se baat Mare 


We're also going, to need a And we want some more margin 
slightly different border. space around the paragraph. 
This border looks ragged, 

not like a solid line. 


Adding some padding 


Let’s start with the padding. CSS has a padding property that you can 
use to set the same padding for all four sides of the content. You can 
set this property either to a number of pixels or a percentage. We'll use 
pixels and set the padding to 25 pixels. 


-gQuarantee { 


border-color: black; 

border-width: 1px; 

border-style: solid; 

background-color: #a7cece; We've adding 25 pixels of padding 
Saag? Aso to all sides of the content (top, 


right, bottom, and lef 4). 
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A test drive with some padding sa 


When you reload the page in your browser, you'll notice the text 
in the guarantee paragraph has a little more breathing room 
on the sides now. There’s some space between the text and the 


border, and it’s much easier to read. 


Notice that the background 
color is under both the content 


Now you ¢an see 29 pixels of space between the and the padding, But it doesn't 


edge of the text content and the border. 


extend into the margin. 


the relaxing sentiments of sights from eras \past. And, don't forget, the loiinge offers free wireless 


access to the Internet, so bring your laptop. 


C 


But that's not all; at night, join us in the backroom as our resident DJ spins a choice selection of 
trance and drum&bass beats across our spacious tiki-themed dance floor. Or just hang out in one of 


Now let’s add some margin 


Margins are easy to add using CSS. Like padding, you can 
specify the margin as a percentage or in pixels. You’re going to 
add a 30-pixel margin around the entire guarantee paragraph. 


Here’s how you do that: 


-gQuarantee { 
border-color: 
border-width: 
border-style: 
background-color: 
padding: 


margin: 
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black; 
1px; 
solid; 
#a7cece; 


25px; 


30px; “— We've adding 30 pixels of margin to all sides of the 
content (top, right, bottom, and left). 
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A test drive with the margin s== 


When you reload the lounge page, you'll see the paragraph is really beginning to 
stand out on the page. With the margins in place, the paragraph looks inset from 
the rest of the text, and that, combined with the background color, makes it look 
more like a “callout” than an ordinary paragraph. As you can see, with only a few 
lines of CSS, you’re doing some powerful things. 


Now we have 30 pixels of margin on all sides. 


the relaxing sentiments of sights frorméras past. And, don't/foi\get, the lounge offess free wireless 
access to the Internet, so brinc cur laptop. 


But that's not all; at night, join us in the backroom as our resident DJ spins a choice selection of 
trance and drum&bass beats across our spacious tiki-themed dance floor. Or just hang out in one of 


If you look at the guarantee paragraph as it’s supposed to look in its final form, 
it has an italic, serif font, a line height greater than the rest of the page, and (if 
you're looking really close) gray text. Write the CSS below to set the line height 
to 1.9em, the font style to italic, the color to #444444, and the font family to 
Georgia, “Times New Roman’, Times, serif. Check your CSS with the answers 
in the back of the chapter, then type it in and test. 
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Adding a background image 


You’re almost there. What’s left? We still need to get the white “guarantee star” 
graphic into the paragraph and work on the border, which is a solid, black line. 
Let’s tackle the image first. 


If you look in the “chapter9/lounge/images” folder, you'll find a GIF image called 
“background.gif” that looks like this: 


8 e © ® background.gif @ 100% (Index) 


This image is a simple star-like 

| pattern in white against a 
transparent background. Notice 
that it also has a matte around 
it that matthes the olor of 
the background. 


100% 


Now you Just need to get that image into your paragraph element, so you'll 
be using an <img> element, right? Not so fast. If you’re adding an image to 
the background of an element, there is another way. Using CSS, you can add 
a background image to any element using the background-image property. 
Let’s give it a try and see how it works: 


Here ave the properties you added 


.guarantee { in the exercise on the previous page 
line-height: 1.9em; 
font-style: italic; 
font-family: Georgia, "Times New Roman", Times, serif; 
color: #444444; 
border-color: black; 
border-width: 1px; 
border-style: solid; 
background-color: #a7cece; 
padding: 25px; 
margin: 30px; 


background-image: url (images/background.gif) ; 


a Add this to your CSS, save, and reload Your page. 
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Wait a sec, it seems 
like we have two ways 
to put images on a page. Is 
background-image a replacement 
for the <img> element? 


No, the background-image property has 
a very specific purpose, which is to set the 
background image of an element. It isn’t 
for placing images in a page—for that, you 
definitely want to use the <img> element. 


Think about it this way: a background image 

is pure presentation, and the only reason you 
would use a background-image property is 
to improve the attractiveness of your element. 
An <img> element, on the other hand, is used 
to include an image that has a more substantial 
role in the page, like a photo or a logo. 


Now, we could have just placed the image 
inside the paragraph, and we could probably 
get the same look and feel, but the guarantee 
star 1s pure decoration—it has no real meaning 
on the page, and it’s only meant to make the 
element look better. So, background-image 
makes more sense. 
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more about the background-image property 


Test driving the background image ss 


Well, this is certainly an interesting test drive—we have 


a background image, but it appears to be repeated irr dee ey ere = : 
many times. Let’s take a closer look at how to use CSS i — 
background images, and then you'll be able to fix this. r 


: i i batkaround. 
Htere’s the guarantee star image in the 9) 
Notice that it sits on top of the background color, 
and because it has a transparent background, it 
lets the color show through. 


Also noti¢e that background images, like the background a = iaalmae oes bal meinan 

tolor, only show under the content area and padding, : ‘om : == aaa ~ 

and not outside the border in the margin. (Siteiete a pete oe een mare epee tome eee | 
= = = MI 


CSS Up Close 


The background-image property places an image in the background 
of an element. Two other properties also affect the background image: 
background-position and background-repeat. 


background-image: url (images/background.gif) ; 


The background—image property is set Notice that no quotes are 
to a URL, which can be a relative path required around the URL. 
or a full-blown URL (http://...). 
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Fixing the background image 


By default, background images are repeated. Luckily, there is a no-repeat value 
for the background-repeat property. Also, by default, browsers position a 
background image in the top left of the element, which is where we want it, but 
let’s also add a background-position property just to give it a try. 


-guarantee { 
line-height: 
font-style: 
font-family: 
color: 
border-color: 
border-width: 
border-style: 
background-color: 
padding: 
margin: 
background-image: 
background-repeat: 


background-position: 


And we want it in 


1.9em; 
italic; 
Georgia, "Times New Roman", Times, 
#444444; 

black; 

1px; 

solid; 

#a7cece; 

25px; 

30px; 

url (images/background. gif) ; 
no-repeat ; a 


top left; 
We want the 


background image 


the top-left corner. €—% to not repeat. 


the box model 


serif; 


You've got two new 
properties to add. 


ad 


The background-position property sets the position of the image and can be specified in pixels, 
or as a percentage, or by using keywords like top, left, right, bottom, and center. 


background-position: top left; 


Places the image in the top left of the element. 


There are many different ways to position things in CSS, and 


we ll be talking more about that in two chapters. 


By default, a background image is “tiled,” or repeated over and over to fill the background space. 
The background-repeat property controls how this tiling behaves. 
Here ave the other background—repeat values You Can use. 


Display the image once; don't 
no-repeat — repeat the image at all. 


repeat-x < Repeat the image only horizontally. 


background-repeat: repeat; 


Sets the image to saa 


horizontally and vertically. This is the 


default behavior. 


repeat-y 
inherit 


Repeat the image only vertically. 


c ~. Just do whatever the parent element does. 
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getting more sophisticated with padding 


Another test drive of the background image #=2 


Here we go again. This time, it looks like we’re much AES 0) gh ee i 


closer to what we want. But since this is a background 
image, the text can sit on top of it. How do we fix 
this? That’s exactly what padding is for! Padding 
allows you to add visual space around the content 
area. Let’s increase the padding on the left and see if 


x r Wartoeete te Lee Feed! Pinel Lew 
we can nail this down once and for all. ieirien  i = , 


This is much better. Now 
the image isn’t repeated. ——> 


But we'd really like for 
the text not to run over 
the top of the image. 


How do you add padding only on the left? 


For padding, margins, and even borders, CSS has a property for every 
direction: top, right, bottom, and left. To add padding on the left side, 
use the padding-left property, like this: 


-guarantee { 


line-height: 1.9em; 

font-style: italic; 

font-family: Georgia, "Times New Roman", Times, serif; 

color: #444444; 

border-color: black; 

border-width: 1px; We've using the padding-left property to 
border-style: solid; increase the padding on the left. 
background-color: #a7cece; 

padding: 25px; <— Notice that we first set the padding on all sides 
padding-left: 80px; “a to 25 pixels, and then we specify a property Lor 
margin: 30px; the left side. 


background-image: 
background-repeat: 


background-position: 


Chapter 9 


url (images/background. gif) ; 


Order matters here—if You switch the order, then you'll 
set the padding for the left side first, and then the 
general padding property will set all sides back to 25 
pixels, in¢luding the left side! 


no-repeat; 
top left; 


www.it-ebooks.info 


Are we there yet? 


Make sure you save your changes and reload the 
page. You should see more padding on the left side 
of the paragraph, and the text is now positioned 
well with respect to the guarantee star. This is a 
great example of where you use padding instead 

of margins. If you need more visual space around 
the content area itself, use padding, as opposed to if 
you want space between elements or the sides of the 
page, in which case, use margin. In fact, we could 
actually use a little more margin on the right side to 
set the paragraph off even more. Let’s do that, and 
then all we need to do is fix the border. 


the box model 


fo pe ahd ope ee ee he cape 
ee ed ee ee ee 
eT 6 ee a a a 
pe Pees Bete ey Ha Be 


We could increase the 


maroin on the right 
eee owe this a little 
move of a “eallout’ look 
And we still need én the page: 


a better border. 


The padding looks reat. 
Now the text is | 
Positioned with res ect 
to the graphic. : 


How do you increase the margin just on the right? 


You do this just like you did with the padding: add another property, xX See the pattern? There's a property 


margin-right, to increase the right margin. 


-guarantee { 


line-height: 1.9em; 
font-style: italic; 
font-family: Georgia, 
color: #444444; 
border-color: black; 
border-width: 1px; 
border-style: solid; 
background-color: #a7cece; 
padding: 25px; 
padding-left: 80px ; 
margin: 30px ; 
margin-right: 250px; 


background-image: 
background-repeat: 
background-position: top left; 


Add the new margin-right property and reload. Now the 
paragraph should have 250 pixels of margin on the right side. 


to control all sides together, and 
properties for each side if you want 
to set them individually. 


"Times New Roman", Times, serif; 


Remember, we're already setting 
the margins to be 30 pixels. 


And now we're going to override that setting for the right 


< side, and set it to 250 pixels. 
url (images/background.gif) ; 
no-repeat; 


ey ee ee ey ey ee ey 


250 pixels 
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A two-minute guide to borders 


There’s only one thing left to do to perfect the guarantee paragraph: 
add a better border. Before you do, take a look at all the different ways 
you can control the border of an element. 


Border Style 


The border-style property controls the visual style of the border. There are eight 
border styles available, from a solid line to dotted lines to ridges and grooves. 


border-style: groove; 


ae To specify a border style, just use the 
border-style property and a value of one 


of the available styles. 


The solid style is 


. : The dotted O 
. : Go with solid : Once you go_ 
h ; i ae 
te bcd krdee | te original ee : dotted, you'll 


es a series of dots. i never go back. } 


And the dashed 


style is just a 1 Ignore dotted; 1 
The double style Go with set of dashes | use dashed. | 
uses two lines. double; I’m around the ees Set ‘ 
twice the fun. border. 
A sete, The inset style I’m the only 
looks like a groove I’m the border looks like an inset —T “in” style: 
in the page that’s got the that sinks into inset. 
(diffieult to see sroove. the page. 
in a book). 
ag ee The ridge style > 
The outset style looks Go with me; I’ve ih like oo I’m more fun; 
like an outset that been better since me Mee I’ve got ridges. 
rises from the page: the outset. 
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Border Width Border Color 


The border-width property controls 
the width of the border. You can use 
keywords or pixels to specify the width. 


border-width: thin; 
border-width: 5px; 


You can specify widths using the keywords thin, 
medium, or thick, or by the number of pixels. 


1px 

2px 

ess §=3/X 

thin mmm §=40X 

medium SES, 5px 
me thick ME Gx 


The border-color property sets the color 
of the border. This works just like setting 
font colors; you can use color names, rgb 
values, or hex codes to specify color. 


border-color: red; 
border-color: rgb(100%, 0%, 0%); 
border-color: #££0000; 


Use border-color 
to specity the color 
of a border. You 
can use any of the 
Common ways to 
specify color. 


Specifying Border Sides 


border-bottom-width | border-left-width 


border-top-color | 

: border-top-style _ border-right-style 
_ border-top-width _ border-right-widt 
border-bottom-color border-left-color 
-border-bottom-style : border-left-style 


Just as with margins and padding, 


border-right-color you can specify border style, width, 


or color on any side (top, right, 
bottom, or left): 


h 


border-top-color: black; 

border-top-style: dashed; 

border-top-width: thick; 
These properties are for the top border 


only. You tan specify eath side of the 
border independently. 
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Specifying Border Corners 


You can create rounded corners on all four corners, 
or just one corner, or any combination. 


You tan specify all four corners with one number. 


border-radius: 15px; v 


Or you can specify each Corner 
separately. Notice that you tan use 
mn ify the radius size. 
a px or em to specity 


border-top-left-radius: 3em; 

border-top-right-radius: 3em; 
& border-bottom-right-radius: 3em; 

border-bottom-left-radius: 3em; 


If You use em, the measurement of 
the border radius is relative to the 
font size of the element, just like 


when You use em for font-size. 


border-top-left-radius: 15px; 
om border-top-right-radius: Opx; 

border-bottom-right-radius: Opx; 

border-bottom-left-radius: 15px; 


You ¢an get all kinds of interesting i) 
shapes using, border—radius. 


388 Chapter 9 


www.it-ebooks.info 


e box model 


Border fit and finish 


It’s time to finish off the guarantee paragraph. All we need to do 1s give 

it a ragged-looking border. But which style is that? The available styles 

are solid, double, dotted, dashed, groove, ridge, inset, and outset. So how 
do we make it look ragged? It’s actually just a trick: we’re using a dashed 
border that has its color set to white (matching the background color of the 
page). Here’s how you do it. Begin by just making the border dashed. Find 
the border-style property in your “lounge.css” and change it, like this: 


Here we've changed 
the border from solid 
to dashed.  ppebegleren oan etitr areal onlay Tt aE yy 


| Our g 


border-style: dashed; 


Go ahead and save the file and reload. You should see a border like this: 


“SS 


Now, to get a ragged-looking border, just set the color of the border 
to white. This makes the border look like it is cutting into the 
background color. Give it a try: find the border-color property 
and set it to white. 


our 


—_ And here we've changed 


border-color: white; the border color from 


black to white. 


Save the file and reload again. Now you should see the ragged border: 


Browsers don't always agree on 
the size of thin, medium, and thick. 


sizes for the keywords thin, medium, and 
thick, so if the size of your border is really 
important to you, consider using pixel sizes instead. 


Wateh it! Browsers can have different default 
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Ar: Head bir Loree 


|a oc ee Pe ra | i el ge 


Head First 


Lounge 


Welcome to the Hamad First Lounge 


The Giga Mint Lewnge i, ee down, the biggqeet erent: in Webdie. Sind int aemge ie sdecdt often of | 
wha by toaa, dred coltese, cr, ei 2 ei loge ood ee che oreicicuhace! culrery. mene that-corbines 
Garrecter CG, Ia, Bee colee evi Ghd been Freeh nad Gea itey boegrenbeoe 


Dror ing fr ne ee Doug, pe ey re ee eet eed rege coord, Ning dw idage 
and adel en ecire dlrmeegse ca pau deniag agate, Whe decile poe ey cee keg mech 
ef gigow frorm-eren peat. Aad, doo forget. che lounge Yer freee rolom acoeee bo th lecerra, wo bring pe 
pa] 


cee eel ot Het bday rece a er ee, 
08 Pe erat need igre ey ap are od 
Vee ge ie hgig ig le See i ete eet oe 
ay, fet gd are A ie et he se aE er, eel pint 
oe omen rig yrds i py eerste eee [T 
ewe ted Pty ected, bee ee ee Se 


Nice! I can't wait to see 
the entire page remodeled. 

Take a break and have an 
iced chai on me! 


Sut iets ee a a res. ete un in the bere a ear cece © 
dries ee eo a een Seed dace fear, or 
fonite at ihr dence bar. Yacen pee goer efies oefieeced Sars 
mPa geoph ef cee Geet poe hee) Bel fo the eee 
Fee rea? i che ieeege, (eo 2 ese be coeectedd wich ce wircten 


fae 


hore Sha yout oc fee Tele SP, ee ee i ee 2 


Congratulations! 


Bravo! You’ve taken an ordinary HTML 
paragraph and transformed it into something 
a lot more appealing and stylish using only 15 
lines of CSS. 


It was a long trip getting here, so at this point 
we encourage you to take a little break. Grab 
yourself an iced chai and take a little time to 
let things sink in—when you come back, we'll 
nail down a few more of the fine points of CSS. 
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While you’re drinking that iced chai, try your hand at adding a border-radius to the guarantee paragraph. 
We've got some examples below of the guarantee paragraph with a variety of border-radius values set. 
Write the CSS to create the border you see in the example. For each example, we've provided the size 
of the border-radius used to create the rounded corners in that example. 


Write your CSS here. 
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Welcome back, and good timing. We’re just about to listen 
in on an interview with a class... 


392 


The Class Exposed 


This week’s interview: 
Are classes always right? 


Head First: Hey, Class; you know we’ve been making good use of you, but we 
still don’t know a lot about you. 


2 


Class: Well, there’s not all that much to know. If you want to create a “group, ’ 
so to speak, that you can style, just come up with a class, put your elements in it, 
and then you can style all the elements in that class together. 


Head First: So the class lets you take sets of elements and apply one or more 
style properties to them? 


Class: Exactly. Say you have some holiday-themed areas in your page—one 
Halloween, one Christmas. You could add all Halloween elements to the 
halloween class and all Christmas elements to the christmas class. Then you 
can style those elements independently—-say, orange for Halloween and red for 
Christmas—by writing rules that apply to each class. 


Head First: That makes a lot of sense. We just saw a good example of that in 
this chapter, didn’t we? 

Class: I’m not sure; I was off working. You'll have to catch me up. 

Head First: Well, we have a paragraph on the Head First Lounge page that 


contains a written guarantee from the owners, and they want this paragraph to 
stand out independently of the other paragraphs. 


Class: So far, so good...but let me ask you this: are there a few of these 
paragraphs, or just the one? 


Head First: Well, I don’t think there is any reason to have multiple guarantee 
paragraphs, and I don’t see the same style being applied anywhere else in the 
page, so just the one. 


Class: Hmmn,, I don’t like the sound of that. You see, classes are meant to be 
used for styles that you want to reuse with multiple elements. If you’ve got one 
unique element that you need styled, that’s not really what classes are for. 


Head First: Wait a second—a class seemed to work perfectly...how can this be 
wrong? 


Class: Whoa, now, don’t freak out. All you need to do is switch your class 
attribute to an id attribute. It will only take you a minute. 
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Head First: An id attribute? I thought those were for those link destinations, like 
in Chapter 4? 


Class: ids have lots of uses. They’re really just unique identifiers for elements. 


Head First: Can you tell us a little more about id attributes? This is all news to 
me. I mean, I just went through an entire chapter using class incorrectly! 


Class: Hey, no worries; it’s a common mistake. Basically, all you need to know 
is that you use a class when you might want to use a style with more than one 
element. And if what you need to style is unique and there’s only one on your 
page, then use an id. The id attribute 1s strictly for naming unique elements. 


Head First: Okay, I think I’ve got it, but why does it really matter? I mean, class 
worked just fine for us. 


Class: Because there are some things you really want only one of on your page. 
The guarantee paragraph you mentioned is one example, but there are better 
examples, like the header or footer on your page, or a navigation bar. You’re not 
going to have two of those on a page. Of course, you can use a class for just one 
element, but someone else could come along and add another element to the 
class, and then your element won’t have a unique style anymore. It also becomes 
important when you are positioning HTML elements, which is something you 
haven’t gotten to yet. 


Head First: Well, okay, Class. This conversation has certainly been educational 
for us. It sounds like we definitely need to convert that paragraph from a class to 
an id. Thanks again for joining us. 


Class: Any time, Head First! 


‘ WAI 
“PQWER 


Choose whether you’d use class or id for the following elements: 


id class id class 


A paragraph containing the footer | Aset of <p> elements 
of a page. containing movie reviews. 


A set of headings and paragraphs An <ol> element containing 
that contain company biographies. your to-do list. 


An <img> element containing a <q> elements containing 
“picture of the day.” Buckaroo Banzai quotes. 


ipued yeaub 


JOMSUY 


aJe 1SI| Op-0} ay} pue ‘Aep ay} Jo a4 
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The id attribute 


Because you've already used ids on <a> elements, and because you already know how 


to use a class attribute, you’re not going to have to learn much to use the id attribute. 


Say you have a footer on your page. There’s usually only one footer on any page, so that 
sounds like the perfect candidate for an id. Here’s how you’d add the identifier footer to 
a paragraph that contains the footer text: 


Cimilar to a Class; just add the Unlike a class, you can only 
attribute “id” and Choose a have one element in your 


unique id name. 


page with an id of “footer”. 


Lo 


<p id="footer">Please steal this page, it isn't copyrighted in any way</p> 


cial characters 
Each element can No si . a5 ia 
es. 
have only one id. are allowed in id nam 


Giving an element an id is similar to adding an element to a class. The only differences are 


that the attribute is called id, not class; an element can’t have multiple ids; and you can’t 


have more than one element on a page with the same id. 
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Dumb Questions 


Q: What’s the big deal? Why do | need an id just Q: Can an element have an id and also belong 
to prove something is unique on the page? |could toaclass? 
use a class exactly the same way, right? A: 
- Yes, it can. Think about it this way: an id is just 
A: Well, you can always “simulate” a unique id with a unique identifier for an element, but that doesn’t 
a Class, but there are many reasons not to. Say you're _ prevent it from belonging to one or more classes (just 
working on a web project with a team of people. One like having a unique name doesn't prevent you from 
of your teammates is going to look ata class and think —_ joining one or more clubs). 
it can be reused with other elements. If, on the other 
hand, she sees an id, then she’s going to know that’s 
for a unique element. There are a couple of other 
reasons ids are important that you won't see for a few 
chapters. For instance, when you start positioning 
elements on a page, you'll need each element you 
want to position to have a unique id. 


www.it-ebooks.info 


the box model 


But how do | use id in CSS? 


You select an element with an id almost exactly like you select an element with a 
class. To quickly review: if you have a class called specials, there are a couple 
of ways you can select elements using this class. You could select just certain 
elements in the class, like this: 


p.specials { 


eolor: xed; This selects only paragraphs that are in the specials class. 


Or you can select all the elements that belong to the specials class, like this: 


.specials { 


color: red; This selects all elements in the specials class. 


Using an id selector is very similar. To select an element by its id, you use a # (hash mark) 
character in front of the id (compare this to class, where you use a . [dot] in front of the 
class name). Say you want to select any element with the id footer: 


#footer { 2, 
color: red; 


This selects any element that has the id “footer”. 


Or you could select only a <p> element with the id footer, like this: 


p#footer { 
color: red; This selects a <p> element if it has the id “footer”. 


The other difference between class and id is that an id selector should match 


only one element in a page. 
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using selecting an id 


Using an id in the lounge 


Our guarantee paragraph really should have an id since it’s 
intended to be used just once in the page. While we should have 
designed it that way from the beginning, making the change is 
going to be quite simple. 


Step one: Change the class attribute to an id in your “lounge.html” file 


Just change the ¢lass 
attribute to an id. 


<p id="guarantee"> 


Our guarantee: at the lounge, we're committed to providing 


you, our guest, with an exceptional experienc very time you 
visit. Whether you're just stopping by to check in on email 


over an elixir, or are here for an out-of-the-ordinary dinner, 


you'll find our knowledgeable service staff pay attention to every 


detail. If you're not fully satisfied, have a Blueberry Bliss Elixir 
on us. 


</p> 


Step two: Change the “.guarantee” class selector in “lounge.css” to an id selector 


Just change the . to a 
# in the selector. 


#gquarantee { 


line-height: 1.9em; 

font-style: italic; 

font-family: Georgia, "Times New Roman", Times, serif; 
color: #444444; 

border-color: white; 

border-width: 1px; 

border-style: dashed; 

background-color: #a7cece; 

padding: 25px; 

padding-left: 80px ; 

margin: 30px; 

margin-right: 250px; 

background-image: url (images/background.gif) ; 
background-repeat: no-repeat; 


background-position: top left; 
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the box model 


Step three: Save your changes and reload the page 9 ates 


Peete ad | mg 


Well, everything should look 
EXACTLY the same. But don’t 
You feel much better now that 
everything is as it should be? 


ects Bhi 
Oe eh a ey eet Ee it et 
es pe oe pp ee 
ee Ger bee oto ese ee eee 
= bee ee ey ee a 
a ey ee ee ee 


thereyareno 
Dumb Questions 


Q: So why did you make the selector #guarantee rather A: No. You'll often know when you design your pages if an 


than p#guarantee? element is going to be unique or not. We only did things this way 
in the chapter because, well, you didn’t know about id when we 

A: We could have done either, and they both would select started. But don’t you think we tied id into the story rather nicely? 

the same thing. On this page, we know that we will always 6) 


have a paragraph assigned to the id, so it doesn't really matter 

(and #guarantee is simpler). However, on a more complex set . 

of pages, you might have some pages where the unique id is i What are the rules for class and id names? 

assigned to, say, a paragraph, and on others it’s assigned to a 

list or block quote. So you might want several rules for the id, like A: Class names should begin with a letter, but id names can 
p#someid, and blockquote#someid, depending on which kind of start with a number or a letter. Both id and class names can 


element is on the page. contain letters and numbers as well as the _ character, but no 
_ spaces. So “number1” works, as does “main_content”, but not 
Q: Should | always start with a class, and then change it “header content”. Just remember, ids must be unique! 


to an id when | know it’s going to be unique? 
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using more than one stylesheet 


Remixing stylesheets 


Before we wind this chapter down, let’s have a little fun 
remixing some stylesheets. So far, you’ve been using only 
one stylesheet. Well, who ever said you can’t use more than 
one stylesheet? You can specify a whole set of stylesheets to 
be used with any HTML. But you may be wondering why 
anyone would want to. There are a couple of good reasons. 
Here’s the first one... 


Imagine that the Head First Lounge takes off, gets 
franchised, does the IPO, and so on (all thanks to you and 
your terrific web work, of course). Then there would be 

a whole corporate website with hundreds of pages, and 
obviously you’d want to style those pages with external 
CSS stylesheets. There would be various company 
divisions, and they might want to tweak the styles in 
individual ways. And the lounge franchises also might want 
some control over style. Here’s how that might look: 


We've set up all the main 

styles to be used by the 
company websites—fonts, 
colors, and so on. 


Corporate 
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and fonts, but we add ina few 
special touches of our own, like a 


Beverage 
Division 


We use all 
the corporate colors 


different line height. 


Seattle Lounge 
(part of the Beverage 


Division) 


We've got a young, hip 
clientele. We tweak the 
colors a bit and add a little 

edge, but overall we use the 
division's main styles. 


Using multiple stylesheets 


So how do you start with a corporate style and then allow the division and 


the lounge franchises to override and make changes to the styles? You use 


several stylesheets, like this: 


<!DOCTYPE html> 
<html> 
<head> 


<meta charset="utf-8"> 


<title>Head First Lounge</title> 


the box model 


In Your HTML, You can specify 
more than one stylesheet. Here, 
we've got three. 


One stylesheet 
for the entire 
corporation. 


<link type="text/css" href="corporate.css" rel="stylesheet"> 


<link type="text/css" href="beverage-division.css" rel="stylesheet"> 


<link type="text/css" href="lounge-seattle.css" rel="stylesheet"> 


</head> 
<body> 


And the lounge in Seattle 


has its own tweaks in its 


stylesheet. 


</body> 
</html> 


Q: So the order of the stylesheets 
matters? 


A: Yes, they go top to bottom, with the 
stylesheets on the bottom taking precedence. 
So if you have, say, a font-family property 

on the <body> element in both the corporate 
and the division stylesheets, the division’s 
takes precedence, since it’s the last one 
linked in the HTML. 


Order matters! A 
stylesheet can override 
the styles in the 
stylesheets linked above it. 


there are no a 
Dumb Questions 


Q: Do | ever need this for a simple 
site? 


A: You'd be surprised. Sometimes there's 
a stylesheet you want to base your page on, 
and rather than changing that stylesheet, 
you just link to it, and then supply your own 
stylesheet below that to specify what you 
want to change. 
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— dd 
The beverage division Can 3 
ite corporate style i 
¢ 


ov even override some 
corporate styles. 


Q: Can you say more about how the 
style for a specific element is decided? 


A: We talked a little about that in Chapter 
7. And for now, just add to that knowledge 
that the ordering of the stylesheets linked 
into your file matters. In the next chapter, 
after you've learned a few other CSS details, 
we're going to go through exactly how the 
browser knows which style goes with which 
element. 
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targeting media types 


Stylesheets—they’re not just for | 
desktop browsers anymore... = 


There’s actually another reason you might want to have multiple style 
files: let’s say you want to tailor your page’s style to the type of device 
your page is being displayed on (desktops, laptops, tablets, smartphones, 
or even printed versions of your pages). Well, to do that there is a media 
attribute you can add to the <link> element that lets you use only the 
style files that are appropriate for your device. Let’s look at an example: 


You specif y the type of 
The media attribute device by treating a “media 
allows you to specify query, whith is matehed 


the type of device this with the device. 
stylesheet is for. ( 


<link href="lounge-mobile.css" rel="stylesheet" media="screen and (max-device-width: 480px) "> 


Here our query specifies 
anything with a streen and any device that has a width 


(as opposed to, say, a of at most 480 pixels. 
printer, or 3D glasses, 
or a braille reader)... 


Likewise, we could create a query that matches the device if it is a printer, 
like this: 


<link href="lounge-print.css" rel="stylesheet" media="print"> 


The dagen a 7 » 
file is na going to the media type is “print”, 


be used it. 


which means we're viewing, 
it ona printer. 


There are a variety of propeties you can use in your queries, like min- 
device-width, max-device-width (which we just used), and the 
orientation of the display (landscape or portrait), to name just a few. 
And keep in mind you can add as many <link> tags to your HTML as 
necessary to cover all the devices you need to. 
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Add media queries right into your CSS 


There’s another way to target your CSS to devices with specific properties: rather 
than using media queries in link tags, you can also use them right in your CSS. 
Here’s an example: 


the box model 


Use the Omedia rule... .followed by your query. 
J Ya And then put all the rules that 
e apply to devices matching this 
Snedt = Serece ene tate eeyece wi etee aeAee:. 4 query within curly braces. 


#guarantee { 
a ae So, these rules will 
margin-right: 250px; — 
} 
} 


@media screen and (max-device-width: 480px) { 
#guarantee { 
margin-right: 30px; 


} 


@media print { 


be used if the 


streen is wider than 4€Opx... 


CW .. these rules will be used if the 


streen is 48Opx ox less... 


body { <— ..and these rules will be used if 


) . . 
font-family: Times, "Times New Roman", serif; Youre printing the page. 


p. specials { All other rules apply to all pages because they 
4— aren't contained within a @media rule. 


color: red; 
} 


So, the way this works, only the CSS rules that are specific to a media type are included in 
an @media rule. All the rules that are common to all the media types are included in the 
CSS file below the @media rules, so that way you don’t have any unnecessarily repeated 
rules. And, when a browser loads the page, it determines through the media queries the 
rules that are appropriate for the page, and ignores any that don’t match. 


Media queries are an area of active 
development by the standards groups, _ 
SO keep your eyes on evolving hest Watch it! 


practices for targeting devices. *etihoneisen tacts 
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Media queries 
are not 


supported by 
IE8 and earlier, 
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testing your Skills 


Exercise 


Look at the devices below along with their specs. Can you design a set of media queries 
to target each device? 


—, 
2) 
Smartphone: 
480 by 640 Tablet, portrait, 
pixels or landscape: 
ae oy Ey ape Desktop PC: 1,280 Internet TV: 2,650 by 1,600 
ee by 960 pixels pixels, landscape 


<link rel="stylesheet" 
media=" 


<link rel="stylesheet" 
media=" 

<link rel="stylesheet" 
media=" 

<link rel="stylesheet" 
media=" 


<link rel="stylesheet" 
media=" 
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href="lounge-smartphone.css" 


"> 

href="lounge-tablet-portrait.css" 

"> 
href="lounge-tablet-landscape.css" 

"> 
href="lounge-pc.css" 

"> 
href="1lounge-tv.css" 

i> 


» 


Your answers here! 
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Q: That’s pretty cool. So | can set 
up different stylesheets for different 
devices? 


A: Yes, you can set up several 
stylesheets and then link to them all in your 


HTML. It’s the browser's job to use the right 
stylesheet based on the media type and the 
characteristics you specify in your media 


query. 


there,are no 
Dumb © 


Ay Are there other media properties 
besides max-device-width and min- 


device-width? 


A: Yes, there are quite a few, including 
max and min width (different from device- 
width, as you'll see shortly), max and min 
height, orientation, color, aspect ratio, and 
more. Check out the CSS3 Media Queries 
specification for all the details (http://www. 
w3.org/TR/css3-mediaqueries/), and Head 


First Mobile Web for examples. 


the box model 


Questions 


Q: Is it better to use <link> or @media 


to specify different CSS rules for different 


media types and characteristics? 


A: Either one will work. But notice that 

if you put all your rules in one file and split 
them up using @media rules, your CSS 
could get pretty big. By using different <link> 
elements for different media types, you can 
keep your CSS organized in different files 
depending on the media type. So, if your 


CSS files are fairly large, we recommend 
using <link> elements to specify different 


stylesheets. 


In your “chapter9/lounge’ folder, you'll find “lounge-print.css”. Open up “lounge.html” in the 
“chapter9/lounge” folder and add a new link to this stylesheet for the media type “print”. Make 
sure you also add the attribute media=“screen’ to the <link> element that links to “lounge.css”, 


so you have one stylesheet for the screen, and one for the printer. Then save, reload the 
page, and choose your browser’s Print option. Run to the printer to see the result! 


<link type="text/css" href="lounge-print.css" 


ms 


Here’s the new link you need to 
add to your “lounge-htm|” file. 


Here’s the printed version. You've totally 
changed how the page looks when it’s 
printed, using CSS. That structure versus 
presentation thing is really paying of f. 


ar 


OPTIONAL PRINTER REQUIRED, NOT INCLUDED WITH BOOK. 
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rel="stylesheet" media="print"> 


VY Head First 


4 Lounge 


Welcome to the Head Fit 


irst Lounge 


¥P in 10 sample the eclectic offering 
tural culinary mene that combines a 
ingredicass, 


+ snob ite of ei 
yr is yt 
& your dining. experience. The decor sumout Did 
ts From eras past. And, dor robe 


Filling the Jounge 
a* Forget, the lounge offers fase wireless acces prwesd 
8 Bo MCR, $0 


testing different css files 


The max-device-width and min-device-width media characteristics are dependent on the 
actual screen size of the device (not the width of your browser window). What if you are 
more concerned with the size of the browser? Well, you can use the max-width and min- 
width properties instead, which represent the maximum and minimum width of the browser 
window itself (not the screen size). Let's see how this works: In your “chapter9/lounge” folder, 
you'll find “lounge-mobile.css”. Open up your lounge.html file again, and change the <link> 
elements in the <head> of the document to look like this: 


<link type="text/css" rel="stylesheet" href="lounge.css" 
media="screen and (min-width: 481px) "> 


<link type="text/css" href="lounge-mobile.css" rel="stylesheet" 
media="sScreen and (max-width: 480px) "> 


<link type="text/css" href="lounge-print.css" rel="stylesheet" media="print"> 


Now, reload the “lounge.html” page in your browser. Make sure the browser window is nice and big. You 
should see the lounge page as normal. 

Next, make your browser window narrow (less than 480 pixels). What happens to the lounge page? Do 
you notice a difference? Describe below what happens when you make the web page narrow and load 
the page. Why is this version of the page better for mobile browsers? 


Make sure you're using a modern browser! [f you're using [E, that means [E9+. 
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R BULLET POINTS 


CSS uses a box model to control how 
elements are displayed. 


Boxes consist of the content area and 
optional padding, border, and margin. 


The content area contains the content of the 
element. 


The padding is used to create visual space 
around the content area. 


The border surrounds the padding and 
content and provides a way to visually 
separate the content. 


The margin surrounds the border, padding, 
and content, and allows space to be added 
between the element and other elements. 


Padding, border, and margin are all optional. 


An element's background will show under the 
content and the padding, but not under the 
margin. 

Padding and margin size can be set in pixels 
or percentages. 


Border width can be set in pixels or by using 
the keywords thin, medium, and thick. 


There are eight different styles for borders, 
including solid, dashed, dotted, and ridge. 


For margins, padding, or the border, CSS 
provides properties for setting all the sides 
(top, right, bottom, left) at once, or it allows 
them to be set independently. 


Use the border-radius property to create 


rounded corners on an element with a border. 


Use the line-height property to add space 
between lines of text. 


You can place an image in the background 
of an element with the background-image 
property. 


Use the background-position and 
background-repeat properties to set the 
position and tiling behavior of the background 
image. 


Use the class attribute for elements that you 
want to style together, as a group. 


Use the id attribute to give an element 
a unique name. You can also use the id 
attribute to provide a unique style for an 
element. 


There should only be one element in a page 
with a given id. 


You can select elements by their id using the 
id selector; for example, #myfavoriteid. 


An element can have only one id, but it can 
belong to many classes. 


You can use more than one stylesheet in your 
HTML. 


If two stylesheets have conflicting property 
definitions, the stylesheet that is last in the 
HTML file will receive preference. 


You can target devices by using media 
queries in your <link> element or the @media 
rule in your CSS. 


box 
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paying 
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HTMLcross 


You're really expanding your HTML and CSS skills. Strengthen 
those neural connections by doing a crossword. All the answers 
come from this chapter. 


Across 

1. By default, background images do this. 
4. To create a “ragged” border, use the 
style. 

6. Padding, borders, and margins are all ‘ 
9. Which kind of elixir do you get if you’re not fully 
satisfed? 

10. Between padding and margin. 


border 


13. We changed the class to an id. 
14. To use a different style for different devices, use 
queries. 


Down 

2. The space between the content and the border. 

3. If you want your element to have a unique style, use 
this kind of selector. 

5. Property used to increase the space between lines 
of text. 

7. Publishing term for the space between lines. 

8. The preferred font used in the guarantee paragraph. 
10.CSS sees every elementasa____«. 

11. Style of border we used on the guarantee 
paragraph. 

12. Optional <link> attribute for other kinds of 
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the box model 


See if you can identify the padding, border, and margins of this paragraph. 
Mark all the padding and margins (left, right, top, and bottom): 


don't forget, the lounge offers free wireless access to the 
Internet, so bring your laptop. 
yma 


margin 


Teriredana) 


fat 


margin 


eke 


padding 


(( osm padding, 
£ Bottom margin 
But that's not all; at night, join us in the backroom as our 
resident DJ spins a choice selection of trance and drum&bass 


beats across our spacious tiki-themed dance floor. Or just han 
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exercise solutions 


If you look at the guarantee paragraph as it’s supposed to look in its final form, it has an 


close) gray text. Write the CSS below to set the line height to 1.9em, the font style to italic, 
the color to #444444, and the font family to Georgia, “Times New Roman”, Times, serif. 


Foret italic, serif font, a greater line height than the rest of the page, and (if you're looking really 
OLution 


Here’s the solution...did you test it? 


You can add the new properties anywhere in 


[i the rule. We added them at the top. 


-guarantee { 
line-height: 
font-style: 
font-family: 
color: 
border-color: 
border-width: 
border-style: 
background-color: 
padding: 
margin: 


1.9em; 

italic; 

Georgia, "Times New Roman", Times, serif; 
#444444; 

black; 

1px; Notite that if a font name has spaces in it, 
solid; you should surround it with quotes. 
#a7cece; 

25px; 

30px; 


of sights from eras pest. fad, dovt forget, the lounge offers fmee wireless access to the Internet, so Oring your 


POPE ereased line height 


An italie, serif font 


i 


Dat thet’s not all;.st night, joln ve In the Sockrocen es cur resident GJ spins @ cholce setectian of trance and 
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the box model 


RS HTMLeross Solution 


Ea a 
RRB 
ie 

EBs 


'M 


RDER Db oH 
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exercise solutions 


Look at the devices below along with their specs. Can you design a set of media queries 
to target each device? 


ige 
OLUTION 


Smartphone: a ’ 
480 by 640 Tablet, portrait, eS a a 
pixels or landscape: 


ee Eyres Desktop PC: 1,280 Internet TV: 2,650 by 1,600 
PINet= by 960 pixels pixels, landscape 


rel="stylesheet" href="lounge-smartphone.css" 
media="" sereen and (max—device—width: 48Opx) "> 


rel="stylesheet" href="lounge-tablet-portrait.css" 
media=" streen and (max—device—width: 1O24px) and (orientation:portrait) "> 


rel="stylesheet" href="lounge-tablet-landscape.css" 
media=" streen and (max—device—width: |O2px) and (orientation'landseape) "> 
rel="stylesheet" href="lounge-pc.css" 

media=" streen and (max—device—width: |28Opx) "> 


rel="stylesheet" href="lounge-tv.css" 
media=" streen and (max—device—width: 2650px) "> 


Media query support atross devices > 


is evolving, so check the Web for the Our answers here. Did you get the same answers? There are many 
latest and greatest techniques. 7 to do this with varying degrees of specificity. If you did it 
diffe 


rently, are Yours better or worse than ours? 
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the box model 


While you’re drinking that iced chai, try your hand at adding a border-radius to the guarantee paragraph. 
We've got some examples below of the guarantee paragraph with a variety of border-radius values set. 
Write the CSS to create the border you see in the example. For each example, we've provided the size 
of the border-radius used to create the rounded corners in that example. 


Write your CSS here. 


Z 


border—top—left—radius: 30px; 
border—top—right—radius: Opx; 
border—bottom—right—radius: Opx; 
border—bottom—left—radius: 30px; 


border—top—left—radius: 4Opx; 
border—top—right-radius: +Opx; 
border—bottom—right—radius: 4Opx; 
border—bottom—left—radius: 4Opx; 


border—top-left—radius: Opx; 
border—top—right-radius: +Opx; 
border—bottom—right—radius: FOpx; 
border—bottom—left—radius: 4Opx; 


border—top—left—radius: Oem; 
border—top—right—radius: Zem; 
border—bottom—right—radius: Oem; 
border—bottom—left—vadius: Zem; 
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exercise solutions 


The max-device-width and min-device-width media characteristics are dependent on the 
Exercise actual screen size of the device (not the width of your browser window). What if you are 

: more concerned with the size of the browser? Well, you can use the max-width and min- 
width properties instead, which represent the maximum and minimum width of the browser 
window itself (not the screen size). Let's see how this works: In your “chapter9/lounge” folder, 
you'll find “lounge-mobile.css”. Open up your lounge.html file again, and change the <link> 
elements in the <head> of the document to look like this: 


<link type="text/css" rel="stylesheet" href="lounge.css" 
media="screen and (min-width: 481px) "> 


<link type="text/css" href="lounge-mobile.css" rel="stylesheet" 
media="screen and (max-width: 480px) "> 


<link type="text/css" href="lounge-print.css" rel="stylesheet" media="print"> 


Now, reload the “lounge.html” page in your browser. Make sure the JAR) i ork Sem 


browser window is nice and big. You should see the lounge page as yrs: ear ae 
normal. 
Next, make b ind pe 

: your browser window narrow (less than 480 pixels). What Lounde 
happens to the lounge page? Do you notice a difference? Describe 


below what happens when you make the web page narrow and load 


the page. Why is this version of the page better for mobile browsers? TE ee 


ee | 
Toe el a Bag ES 
cachet: erin of ah, Lee. eo! coe 


When we make the lounge page narrower sr cdesladar Asap pacino 
than 40 pixels, the guarantee paragraph st a am a a ad 
changes style. The right margin gets aes 
veduted from 250px to 30px (to matth wnt scar nat edie 
the vest of the margin); the background pana aiata Grigetinh seasanes Kansas 
star image disappears, and the extra cron pa et ia aterm 
padding on the left goes away too. rae ¢ Sen var 
This version will work better for mobile Ree 
browsers because the guarantee paragraph Sesakopanrrareceere 
gets too — with the that’s besten stn onan enn te 
designed tor wider streens. By removing Senin eer eden ee 
the iaaapaied image and il extra riectniapreasenre TPNH 
margin and padding, the paragraph is easier Pe ceetel bens Rhy a Re 
to vead. And it’s really the content that whe 


matters at the end ot the day, right? 


a RL a a, fp ee 
LP SR DR Tc cde 

17S ROS aE Oars ST CO Ce 
Hepp cies Beer Oe jue eg ee ee 
Laser theater earale Tk orca 


Lira tek was. i 


Make sure you're using a modern browser! [£ you're using [E, that means |E4+. 
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10 divs and spans 


* + 
A dvanced Web Construction 


Some builders say, 
“measure twice, cut once." 
I say, “plan, div, and span." 


It’s time to get ready for heavy construction. In this chapter we're 
going to roll out two new HTML elements: <div> and <span>. These are no simple 
“two by fours”; these are full-blown steel beams. With <div> and <span>, you’re going 
to build some serious supporting structures, and once you’ve got those structures in 
place, you’re going to be able to style them all in new and powerful ways. Now, we 
couldn’t help but notice that your CSS toolbelt is really starting to fill up, so it’s time 

to show you a few shortcuts that will make specifying all these properties a lot easier. 
And we’ve also got some special guests in this chapter, the pseudo-classes, which 
are going to allow you to create some very interesting selectors. (If you’re thinking 
that “pseudo-classes” would make a great name for your next band, too late; we beat 


you to it.) 
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a new /ounge assignment 


You know, we'd love it if you 
could make the elixir specials a 
little more attractive on the web 
page. Could you make it look just 
like our handout menu? 


The elixir 
mixer, filice 


Weekly Elixir 
Specials 


Lemon Breeze 
The ultim; 


n @ twist oj 
Wann into a smooth oe 
v ler that will keep your 
M goin 

day and all night: = 


! 


C 


Here’s the handout menu with the elixir 
specials. Wow, the design is a lot different 
than the rest of the page: it’s thin, the text 
is centered, and there are red headings, an 
aquamarine border around the whole thing, 
and even some cocktail graphics at the top. 


lated taste 
Sensation on ice 


ve 


Black Brain Brew 


Join us an e 
Y €vening for th 
ese 
ur Wonderful elixirs, angel 
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A. close look at the elixirs HTML 


Alice sure has asked for a tall order, hasn’t she? She wants us to take the existing lounge HTML 
and make it look like the handout menu. Hmmm...that looks challenging, but we do have CSS 
on our side, so let’s give it a try. But before we jump right into styling, let’s get an overview 

of the existing HTML. Here’s just the HTML snippet for the elixir specials; you'll find it in 
“lounge.htm!” in the “chapter10/lounge” folder: 


We have 
three 
elixirs, 
each with 
the same 
structure 


e 


The elixir specials section begins 
—_ with an <h2> heading, 


<h2>Weekly Elixir Specials</h2> 


<p> Each elixir has 
<img src="images/yellow.gif" alt="Lemon Breeze Elixir"> <— an image ina 
</p> <p> element. 
<h3>Lemon Breeze</h3> aeons as 
<p> < 
; ; — <h3> heading... 
The ultimate healthy drink, this elixir combines 
herbal botanicals, minerals, and vitamins with 
a twist of lemon into a smooth citrus wonder <— ~-and a 
that will keep your immune system going all description, 
day and all night. also in a 
</p> Paragraph. 
<p> 
<img src="images/chai.gif" alt="Chai Chiller Elixir"> 
</p> And this 
<h3>Chai Chiller</h3> structure is 
<p> repeated for 
Not your traditional chai, this elixir mixes maté&eacute; each elixir 
with chai spices and adds an extra chocolate kick for 
a caffeinated taste sensation on ice. 
</p> 
<p> 
<img src="images/black.gif" alt="Black Brain Brew Elixir"> 
</p> 
<h3>Black Brain Brew</h3> 
<p> 
Want to boost your memory? Try our Black Brain Brew 
elixir, made with black oolong tea and just a touch 
of espresso. Your brain will thank you for the boost. 
</p> 
And, Finally, at the 
<p> bottom, there is 
Join us any evening for these and all our PN, another paragraph, with 
other wonderful some text and a link to 
<a href="beverages/elixir. html" _ the veal elixirs page: 
title="Head First Lounge Elixirs">elixirs</a>. 
</p> 
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This looks tough, guys. 
There are a lot of style changes 
we've got to make, and the elixirs 
style doesn't really match the 
rest of the page. 


Jim: Come on, Frank, you know we can just create a class or two and then 
style all the elixir elements separately from the rest of the page. 


Frank: That’s true. Maybe this isn’t so bad. I’m sure there is a simple 
property to make text align to the center. And we know how to handle the 
colored text. 


Jim: Wait a sec, what about that border around everything? 


Frank: Piece of cake. We just learned how to make borders. Remember, 
every element can have one. 


Joe: Hmm, I don’t think so. If you look at the HTML, this is a bunch of 
<h2>, <h3>, and <p> elements. If we put separate borders on every element, 
they'll just look like separate boxes. 


Frank: Youre right, Joe. What we need is an element to nest all these other 
elements inside, so we can put a border on that. Then we'll have one border 
around everything in the elixirs section of the page. 


Jim: Well, I see why you get paid the big bucks, Frank. Could we nest the 
elixir stuff inside a <p> element, or a <blockquote>? 


Frank: Well, that would ruin the structure and meaning of the page, an 
elixir menu isn’t a paragraph or a block quote. Feels like a hack to me... 


Frank: ...actually, I don’t think we’re that far off. ’ve been reading a certain 
book on HTML and CSS, and I’m just up to a section on a new element 
called <div>. I think it might be the tool we need. 


Joe: <div>—what’s that? It sounds like it’s for math. 


Frank: That’s not far off, because a <div> lets you divide your page into 
logical sections or groupings. 


Jim: Hey, that sounds like exactly what we need! 


Frank: Yup. Let me show you guys how to divide a page into logical 
sections, and then Pll show you what I know about <div>... 


www.it-ebooks.info 


divs and spans 


Let’s explore how we can divide (lst 
a page into logical sections 


Take a look at the web page to the right: it’s a web 
page for PetStorz.com, and we’re going to spend a 
few pages looking at how we might add some more 
structure to it by identifying some logical sections and 
then enclosing those inside a <div> element. 


Are aetier oon 


Gere. ti ea see 


This is a pretty normal— 
looking page: lots of 
headings, paragraphs, and 


an image in there. ae 


But by just focusing on the structure of the page, 
you can't really tell a whole lot about the page. 
What elements make up the header? |s there a 
footer on the page? What are the content areas? 


Identifying your logical sections 


Okay, so our job is to locate “logical sections” 
in this page. What’s a logical section? It’s just 

a group of elements that are all related on the 
page. For instance, in the PetStorz.com web 


page, there are some elements that are used for 
the cats area on the page, and some that are 
used for dogs. Let’s check it out. is 
The PetStorz. page has two main sontakt 
areas, one for cats, and one for dogs. It : 
has some other areas too, but we'll come 09s 
back to those. 


In this ¢ase, both the cats and dogs sections 
consist of two elements, a heading and a Sa 
paragraph. But often these groupings can 


contain many more elements. 
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Using <div>s to mark sections 


Now that you know which elements belong 
in each section, you can add some HTML 
to mark up this structure. The common 
way to do this is to place <div> opening 
and closing tags around the elements that 
belong to a logical section. Let’s first do this 
pictorially, and then we’ll come back to the 
real markup in a couple of pages. 


Labeling the <div>s 


Just by nesting your elements in <div>s, 
you've indicated that all those elements 
belong to the same group. But you 
haven’t given them any kind of label 
that says what the grouping means, 
right? 


A good way to do that is to use an id 
attribute to provide a unique label for 
the <div>. For instance, let’s give the 
cats <div> an id of “cats” and the 
dogs <div> an id of “dogs”. 
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Let's nest the elements in each 
Grouping in a <div> element. 


Here's our cat group a 


And here s ao 


doo, group: 


Here we've added an id div id=“cats” 


of “eats” to the first fi | h2 | 


<div> to indicate what 
the logical section is for. 


div id=“dogs” 


find likewise Lor a 
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ig BRAIN 
POWER 


CEO, you've been asked to 


changes to PetStorz main 


One? 


What about Page Two? 


Adding some style 


Okay, so you’ve added some logical 
structure to the PetStorz page, and you’ve 
also labeled that structure by giving each 
<div> a unique id. That’s all you need 

to start styling the group of elements 
contained in the <div>. 


Here we have two rules, one 
Lor eath <div>. Each <div> is 
selected by an id selector. 


#cats { 


background-image: url (leopard. jpg) ; 


} 


#dogs { 


background-image: url (mutt. jpg) ; a mutt image. 


} 


come in and consult on style 


page. How quickly would you 
understand the PetStorz web 


page if you were shown Page div id="dogs” 


divs and spans 


On a referral from the Starbuzz fi 


div id=“cats” | 


h2 
h2 


Le 


p 


Now the <div>s N 
have a little style. 


By setting the 
background on the Ly 
<div>, it also shows ; wii wi 4 
thieugh the elements ry { 
rowg ris ‘S nee aed 


contained in the <div>. 


The elements in the <div> will also os. Cycles" 
inherit some properties from the 

<div>, just as any child element 

does (like font-size, color, ete). 


Each rule sets the 
background—image 
property: For cats we 
have a leopard image, 


~~ and for dogs we have 
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Exposing even wore structure 


There are a couple of reasons you might BNI Wess 
want to add more structure to your Nes wedded n 
pages with <div>s. First, you may want another <div with an i 
to further expose the underlying logical eee hes 

f id indicating this is the 
structure of your pages, which can help Lesdew oh the va 
others understand them, and also help oe 


div id=“cats” 


in maintaining them. Second, there are 
times when you need the structure so 

that you have a way to apply style to a div id="dogs” 
section. Often, you’ll want to add the 


structure for both reasons. 


So, in the case of PetStorz, we could 7: aie oo 
take this to the next level and add a few € rooter of the page. 


more <div>s... 
div id=“footer” 
Adding this structure through <div>s 
tan even help you think through your 


page design. For instance, does this 
lone <p> really need to be here? 


div id=“header” 


Adding structure on structure ile 


And you don’t have to stop there. It is div id=“pets” 
common to nest structure, too. For instance, div id=“cats” 

in the PetStorz page, we have a cat section h2 ) 
and a dog section, and the two together are 
logically the “pets” section of the page. So, 
we could place both the “cats” and “dogs” 
<div>s into a “pets” <div>. 


div id=“dogs” 


Now we've marked up this HTML so that we es 


know there is a logical section in the page 
with “pets” content in it. Further, that “pets” 


section has two logical subsections, one for div id=“footer” 


“eats” and one for “dogs” ' 
j 
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Q: So, a <div> acts like a container 
that you can put elements into to keep 
them all together? 


A: It sure does. In fact, we often describe 
<div>s as “containers.” Not only do they act 
as logical containers that you can use to hold 
a bunch of related elements (like the “cat” 
elements) together, but when we start styling 
<div>s and using them for positioning in the 
next chapter, you'll see they act as graphical 
containers, too. 


Q: Beyond the structure I’m already 
putting into my pages with headings and 
paragraphs and so on, should | also be 
adding a higher level of structure with 
<div>s? 


A: Yes and no. You want to add structure 
where it has a real purpose, but don’t add 
structure for structure’s sake. Always keep 
your structure as simple as possible to get 
the job done. For instance, 


thereyareno 
Dumb Questions 


if it is helpful to add a “pets” section that 
contains both “cats” and “dogs” to the 
PetStorz page, by all means add it. However, 
if it provides no real benefit, then it just 
complicates your page. After working with 
<div>s for a while, you'll start to get a feel for 
when and how much to use them. 


Q: Do you ever put a <div> in a class 
instead of giving it an id? 


A: Well, remember that an element can 
have an id and be in one or more classes at 
the same time, so the choice isn’t mutually 
exclusive. And, yes, there are many times 
you create <div>s and place them into 
classes. Say you have a bunch of album 
sections in a page of music playlists; you 
might put all the elements that make up the 
album into a <div> and then put them all 

in an “albums” class. That identifies where 
the albums are, and they can all be styled 
together with the class. At the same time, 
you might give each album an id so that it 
can have additional style applied separately. 


divs and spans 


Q: | was having a little trouble 
following the <div> within <div> stuff, 
with the “pets” and “cats” and “dogs”. 
Could you explain that a little more? 


A: Sure. You're used to elements being 
nested in other elements, right? Like a <p> 
nested in a <body> nested in an <html> 
element. You've even seen lists nested 
within lists. The <div> is really no different; 
you're just nesting an element inside another 
element, and, in the case of PetStorz, we're 
using it to show larger chunks of structure (a 
“cats” and “dogs” nested in a “pets” section). 
Or, you might use <div>s to have a beer 
section nested in a beverages section nested 
in a menu section. 


But the best way to understand why you’d 
want something like a <div> within a <div> is 
by using them and encountering a situation 
where they mean something to you. Put this 
in the back of your mind, and you'll see an 
example soon enough where we need one. 


Use, don’t abuse, <div>s in your pages. Add more 
structure where it helps you separate a page into logical 
sections for clarity and styling. Adding <div>s just for 
the sake of creating a lot of structure in your pages 


complicates them with no real benefit. 
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adding divs to the lounge 


Meanwhile, back at the lounge... 


Enough “theory” about <div>s—let’s get one into the lounge page. Remember, we’re trying to get all 
the elixir elements into a group and then we’re going to style it to make it look like the elixir handout. So, 
open up your “lounge.html!” file in the “chapter10/lounge” folder, locate the elixir elements, and then 
insert opening and closing <div> tags around them. 


a Here’s the opening tag, 


) . 
<div id="elixirs"> and we've given it an id pene 2 tt 
Elixi i pa? 1 It. showln " 

<h2>Weekly Elixir Specials</h2> elixirs” to identify it. STII Brow Lhe entire 
<p> File. When You open 

<img src="images/yellow.gif" alt="Lemon Breeze Elixir"> “lounge-html”, you'll see 
</p> all the markup for the 
<h3>Lemon Breeze</h3> page. 
<p> 

The ultimate healthy drink, this elixir combines 


herbal botanicals, minerals, and vitamins with 
a twist of lemon into a smooth citrus wonder 
that will keep your immune system going all 
day and all night. 

</p> 


<p> 
<img src="images/chai.gif" alt="Chai Chiller Elixir"> 
</p> 


<h3>Chai Chiller</h3> 

<p> 
Not your traditional chai, this elixir mixes maté&eacute; 
with chai spices and adds an extra chocolate kick for 
a caffeinated taste sensation on ice. 

</p> 


<p> 
<img src="images/black.gif" alt="Black Brain Brew Elixir"> 
</p> 


<h3>Black Brain Brew</h3> 

<p> 
Want to boost your memory? Try our Black Brain Brew 
elixir, made with black oolong tea and just a touch 
of espresso. Your brain will thank you for the boost. 

</p> 


<p> 
Join us any evening for these and all our 
other wonderful 
<a href="beverages/elixir.html" 
title="Head First Lounge Elixirs">elixirs</a>. 
</p> 
</div> Za And here’s the closing tag, 


422 


www.it-ebooks.info 


divs and spans 


Taking the <div> for a test drive «#t=s 


That was easy, wasn’t it? Now that we’ve got a more 
structured page, let’s fire up the browser and see 
how it looks... 


Hmmm...no change at all! 
But that’s okay: the <div> 
is pure structure, and it 
doesn’t have any “look” or 
default style in the page. 


That said, a <div> is just a block 
element, and you ¢an apply any styles 
you want to it. So, onte you know how 
to style a block element (and you do), 
You know how to style a <div>. 


Ne 


WAL 
POWER 


PP speed te ee 
- a ee = 


Tu dh ote at ee he eee ee 
aR a a TI 


Wesicip Flinis Apnciads 


Lome: Brrece 
Thee ciliemommten mma ioe iri, hide a ete eRe bro nat mma cad een, eed an ions 


eh ed kr dd we I ie oe 
ee Day oe 


Chal Thier 


Sato errr Ge a a! oil, el sme ef le | 


irik Nah Mer easton cece Lame 


= 
Bisct feoir Bro 


ATs he ined yee ree Ty oe Ml Bede Bit eer, ob AE Gadi ee ik 
red fsa mc dence nv. “Pcs fe ers wi aba ve. bes bee be 


ee eer 


Weekly Elixir 
Specials 


Remember, the goal here is to restyle the elixir content on the page 


so it looks like the handout. 


4 


Before we took a detour to learn about <div>s, we were trying to neo 
figure out how to get a border around the entire set of elixirs. Now 
that you’ve got a <div> in “lounge.html”, how would you go about | | 


adding a border? 


Chai Chiller 
Not your 
this elixir my 


‘Join us any evenin 
our wonder 


19 for these ang 
rfl elixirs. 
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Adding a border 


Now that you have a <div> around all the elements in the elixirs section, 


the fun begins: you can style it. 


The first thing we want to reproduce in the elixirs handout is a border that 
wraps around all the elements in the elixirs section, right? Well, now that 
you actually have a <div> element that wraps around the elixirs section, 


you can style it and add a border. Let’s try that now. 


You'll need a new rule in the lounge’s CSS to select the <div> element 
using its id. Open up your “lounge.css” file in the “chapter10/lounge” 


folder, and add this rule at the end: 


#elixirs { 


border-width: thin; selects 
border-style: solid; and adds a thin, 
border-color: #007e7e; aquamarine Color. 


Add this at the end of your CSS file. It 
the elixivs <div> element using its id, 
solid border in our favorite 


An over-the-horder test drive <xte ... ‘ 


After you’ve added the CSS, save it and then reload 

your “lounge.html” file. 
Here’s the border that you just added 
to the elixirs <div> element. 


You added a visible border 
Lo this <div>, but it still has 
no padding and no margin. 
We'll need to add that. too. 


Notice that the border goes 
around all the elements inside 
the <div> element. The <div> 
is a box like every other 
element, so when You add 

a border, the border goes 
around the content, which is 


all the elements in the <div>. ae 
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Adding some real style to bee. 
the elixirs section The width of the elixirs 


handout is narrower than the 
There's a background vest of the page. 

So far, so good. We’ve found a way to get image at the top. 
that border around the entire section. Now _ esha 
you’re going to see how to use the <div> to Net 
customize the styling of the entire elixirs section The main heading 7 Weekly Elixir 
independent of the rest of the page. and the paragraph Bpecials 
We obviously have some padding issues to deal arent Haeh while 
with, because the border is right up against the ated dolor thst 
content. But there’s a lot of other style we need sabaiie Ueieeiap sal 
to work out, too. Let’s take a look at everything the logo. 
we need to take care of... ” 


Lamon Brean 


The text and images The wtken ate 2 
bg 9 Sixit eonnbinasg rat 


are centered, and Larval, minerass, an 
aan I vitecring with mtwet or 
there’s padding on EenON IRs a eetiooth eltros 


the sides to add arenune system gaing nll day 


space between the 


text and the border. 


The line-height of the 


Chel Chiter 
paragraphs looks a lot more Sie 
like the default line height for exe tine mBte wie Eee 
: Spices and adds an oxi 
the page (before we changed it caniittenlnte kick tay 
in the last chapter). * oe sare O 
The font family is a sans—serif font, just 
like the body font, so we don’t have to : 
change that. Remember that the <div> 
element and all the elements nested in it : 
inherit the font family from the body. = 
Mack Grain Brew 
Weare te Decca 


Try Gur ack Birnin: Brew 
elligir, om 
aoiong ta ae porto 


SSDNeETSO, Four bralin wll 
Deri yey fae chy boop. 


: Jn ws an 
This link is aquamarine. ~ ared all aur emer ee eeae 
| meaice. 
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The game plan 


That’s a lot of new style, so let’s get a game plan together before 
attacking it. Here’s what we need to do: 


First, we’re going to change the width of the elixirs <div> to 
make it narrower. 


Next, we’ll knock out some of the styles you’re already familiar 
with, like padding and the background image. We'll also play 
with the text alignment, which you haven’t seen before. 


Then all we’ve got left are the text line heights and the heading 
colors. You’re going to see that you need to upgrade your CSS 
selector skills just a bit to get those changed. 


That’s a lot to do, so let’s get started. 


Working on the elixir width 


We'd like the elixirs to be quite narrow, so it looks like the narrow 
handout menu at the lounge; about 1/4 the width of a typical 
browser window should be about right. So, let’s say you set your 
browser to 800 pixels wide; that would be about 200 pixels. You’ve 
set the widths of padding, borders, and margins, but you’ve never 
set the width of an element before. To do that, you use the width 
property, like this: 


#elixirs { 
border-width: thin; 
border-style: solid; 
border-color: #007e7e; 
width: 200px; 


Ci. width property lets you specify the width of 
the element’s content area. Here, we're specifying 
that the content width be 200 pixels. 


We've setting this on the elixirs <div>. So the content 
in the elixirs <div> will be 200 pixels wide, and the 


browser’s layout rules will work to fit all the elements 
nested in the <div> within that width. 


Give this a try. Open your “lounge.css” and add this rule to the bottom. 
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Test driving the width 


Next, save the CSS and then reload the “lounge.html” file. You’ll see the elixirs 
section get much skinnier, thanks to the width you gave it. The width of the 


content in the <div> is now exactly 200 pixels. There’s also some interesting 
behavior you should check out... 


Bees Cae = : 
a Lie | Ber ieee eee 1 fearge Set = 4, 
ieee righe in ete tart A Mabie ood oetve orcad Gere gene ia Pe) Oe ye 
jews ig mere tee Bene Sees Seer eed a ee. 
Meaty Eitaly 
Speciate 
i lixivs = 
Now all the content in the ¢ se 
ediv> fits into a space that is 2OO on 4 Re 
pixels wide. [t doesnt change, even if bei eens unre Pa Notice that the 
eer yak nine sia ioocthe height of the elixirs 
wide, or veally narrow. [ry it! baad alert eilion got a lot 
taller. That’s because 
uv we made it narrower, 
; so the content 
zGO Pixels Chal Calter takes up more room 


vertically instead. 


oot aes ee ee 


ole in, 


Compare the behavior of the <div> 
to that of the other elements 


when you make your browser sete Yt See 
window wide. The paragraphs Scar ial rst eee Pine ba 
automatically expand to Fill the aspen erate 


width of the browser. We'll talk <r et 
about that more in a sel... ————?, exe tpsny sated atest bs a pg tO bony re, re Hk pe 
eee ee ee ee ee 


SOR WAIL 
POWER 
Can you resize your browser window to less than the width of the elixirs <div>? Some browsers 
won't let you go that narrow; others will. If you can go narrower, compare the text in the elixirs 


<div> with the rest of the text on the page. The other paragraphs resize themselves no matter 
how wide or narrow you go, but the elixirs <div> never gets narrower or wider than 200 pixels. 
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more about widths 


I was wondering how the width 
property relates to padding and 
margins. Is this the width of the 
content itself? Or the entire box, 
including the padding and margin? 


The width property specifies the 
width for the content area only. 


To figure out the width of the entire box, you 
need to add the width of the content area to the 
width of the left and right margins, the left and 
right padding, and the border width. Don’t forget 
that you have to include twice the border width, 
because there is a border on the left and the right. 


total width 
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Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 

| time you visit. Whether you're just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 
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Well, then how do we 
specify the width of the 
entire element? 


You don’t. You specify the width of the content area, 
the padding, the border, and the margin. All of that 
added together is the width of the entire element. 


Say you set the content area width to be 300 pixels using the width property 
in a CSS rule. 


And let’s say you've set the margins to 20 pixels and the padding to 10 pixels, and you 
have a |-pixel border. What’s the width of your element’s box? Well, it’s the width of 
the content area added to the width of the left and right margins, the left and right 
padding, and the left and right border width. Let’ see how to calculate that... 


(1) The content area is 300 pixels. 


300 pixels ) 


Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 


/with an exceptional experience every 
time you visit. Whether you're just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you'll find our 


knowledgeable service staff pay attention . . 
to every detail. If you’re not fully satisfied (2) Figure out how much is taken vp by 
the margins, padding, and border. 


have a Blueberry Bliss Elixir on us. 
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(3) [£ looks like 62 pixels are taken up, so 
add that to the content area’s width of 


300 pixels, and we have 300 + 62 = 362 
a pixels for the entire box. 
3] + 3] = 62 


ie 
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box width fine points 


Q: If | don’t set the width of an 
element, then where does the width come 
from? 


A: The default width for a block element 
is “auto”, which means that it will expand to 
fill whatever space is available. If you think 
about any of the web pages we've been 
building, each block element can expand to 
the entire width of the browser, and that’s 
exactly what it does. Now, hold this thought, 
because we're going to go into this in detail 
in the next chapter. Just remember that 
“auto” allows the content to fill whatever 
space is available (after taking padding, 
border, and margin into account). 


your pencil 
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thereyareno 
Dumb Questions 


Q: What if | don’t have any margin, 
padding, or borders? 


+ Then your content gets to use the 
entire width of the box. If the width of the 
content area is 300 pixels, and you have no 
padding, border, or margin, then the width of 
the entire box would also be 300 pixels. 


Q: What are the different ways | can 
specify widths? 


A: You can specify an actual size— 
usually in pixels—or you can specify a 
percentage. If you use a percentage, then 
the width is calculated as a percentage of 
the width of the container the element is in 
(which could be the <body>, a <div>, etc.). 


Q: What about the height? 


A: In general, the height of an element 
is left at the default, which is auto, and the 
browser expands the content area vertically 
so all of the content is visible. Take a look 
at the elixirs section after we set the width 
to 200 pixels, and you'll see the <div> got a 
lot taller. 


You can explicitly set a height, but you risk 
having the bottom of your content overflow 
into other elements if your height isn’t big 
enough to contain it. In general, leave your 
element heights unspecified so they default 
to auto. 


Here’s a box that has all the widths labeled. What is the width of the entire box? 


Your answer here 


Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you're just 
stopping by to check in on email over 

an elixir, or are here for an out-of- 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 


200 pixels 


30 pixels 
2 pixels 
5 pixels 
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Adding the basic styles to the elixirs 


We've got the width out of the way. What’s left to do? 
A: irst, we’re going to change the width of the elixirs <div> to 
make it narrower. 


[-] Next, we'll knock out some of the styles you’re already familiar Bailes doing, this step next. 
with, like padding, text alignment, and the background image. 


[_] Then all we’ve got left are the text line heights and the heading 
colors. You’re going to see that you need to upgrade your CSS 
selector skills just a bit to get those changed. 


Now we’re going to concentrate on some of the basic styles, like the 
padding, the text alignment, and also getting that background image 
of the cocktail glasses in the elixirs <div>. You’re already familiar 
with how most of this works, so let’s take a quick look at the CSS: 


Remember, we're going, to apply all this style to 

the elixirs <div> so that it only affeets the <div> ns Sealine Shale Binicts | 

and the elements it contains, not the entire page. SES diane aiden provide en 
of space for the content. Notice that we re not 
adding ary padding at the top because ens s 

alveady plenty of room there, thanks to the 

default margin on the <h2> heading, (look back a 


#elixirs { 


Paes ee hie: the last test drive and you'll see there's plenty of 
border-style: solid; oom above the <h2>). But we do need it on the 
border-color: #007e7e; : 4. 
, and le 
width: 200px; right, bottom 
padding-right: 20px; ; «non the left to indent 
ing- 9 F We're adding, some margin 
padding-bottom: 20px ; caluaes Pon the vest of the page a bit. 
padding-left: 20px ; the elixi j lab 
This is going to come in handy lover. 
margin-left: 20px; 


Use text-align on block elements to 
ES Oa center; < align the text they contain. Here, 


we're going to center—align the text. 


background-image: url(images/cocktail.gif) ; 
background-repeat: repeat-x; 


} 
t, finally were specifying an image to use in the background, in this 
tase the cocktail image. We're setting the background—repeat property 
to vepeat—x, which will tile the image only in the horizontal direction. 
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Test driving the new styles see 


ee a = ay 


2 vei ee eT ee Pe 


Pree ae 
Now it’s time to add those new properties to your oa YA I i SE 
“lounge.css” file and reload the page. Let’s check out Waaskty Citar a The tiled image looks 
the changes: the headings, the images, and the text — nice, and it only tiles 
are all centered in the <div> and have a little more horizontally. 
breathing room now that there’s some padding in e , 
place. We’ve also got a little decoration at the top : We've got some 
with the tiled cocktail image. ee padding here, and 
lecraciitires |] at the bottom 
cormameres | nd left. 


wiles eS i el 


souard = yeu aeo— «and everything's 


eR A HE ie 


al ofl ag Ve centered nicely. 


Chai Ositer 


Wait just a sec...why does the 
text-align property affect the 
alignment of the images? Shouldn't 
it align only text? Seems like it 
should be called something else if it 
aligns images too. 


2 ee ee 


Bae Peek Pe ee 
ie oe aie oe 
iis bie fer 
Te eo ne ere 


hack Grade Brew 


fee a pe ee 
ep ee ee es re 
2 Cab oe 

oe en eed ed 
Perens, Ye bear: ol 
Set pe ee ee ee 

Sad ee eg bel Me 

ee del ot na Bl 
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Good point...it doesn’t seem right, does it? But the truth 
is that text-align will align all the inline content n a block 
element. So in this case, we’re setting the property on the 
<div> block element, and all its inline content is nicely 
centered as a result. Just remember that text-align, 
despite its name, works on any kind of inline element. 
One other thing to keep in mind: the text-align 
property should be set on block elements only. It has no 
effect if it’s used directly on inline elements (like <img>). 
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That's interesting 
because I noticed the text inside the 
<div> is all inside other block elements, 

like <h2>, <h3>, and <p>. So, if text-align 
is aligning inline elements in the <div> block 
element, how is the text in these nested 
block elements getting aligned? 


Good catch. All the text inside the <div> 
element is in nested block elements, but it is 
all aligned now. That’s because these block 
elements inherit the text-align property 
from the <div>. So here’s the difference: 
rather than the <div> itself aligning the 
text in the headings and the paragraphs 
(which it won’t do because these are block 
elements), the headings and paragraphs 
are inheriting the text-align value of 
“center”, and then aligning thezr own content 
to center. 


So what? Well, if you think about it, this 
gives you a lot of leverage when you use a 
<div>, because you can wrap a section of 
content in a <div> and then apply styles 
to the <div> rather than each individual 
element. Of course, keep in mind that not 
all properties are inherited by default, so 
this won’t work for all properties. 
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your pencil 
So now that you understand widths, what's the total width 
of the elixirs box? To start with, we know the content area 
is 200 pixels. We've also set some left and right padding 
that affects the width, as well as a border that’s set to “thin”. 
Just assume a thin border is 1 pixel thick, like it is on most 
browsers. And what about margins? We set a left margin 
value, but no right margin value, so the right margin is 0 
pixels by default. 


e 
Here are all the properties that relate to width. Your job is to 
figure out the total width of the elixirs <div>. 
Weekly Elixir 
Specials 


border-width: 


Lemon Breeze 
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We’re almost there... 


We’re close to having the elixirs done. What’s left? 


re irst, we're going to change the width of the elixirs <div> to 


f make it narrower. 
Next, we’ll knock out some of the styles you’re already familiar 
with, like padding, text alignment, and the background image. 


<~ We're on the last. step. 


Then all we’ve got left are the text line heights and the heading 
colors. You’re going to see that you need to upgrade your CSS 
selector skills just a bit to get those changed. 


Sounds pretty easy, right? After all, you’ve done 


all this before. In fact, given that you know you 
can just set styles on the <div> and they will be 
inherited, you can take care of this real fast. 


We've almost got this done; we 
just need to change the header 
colors and also the line height. 


Frank: Yeah, this is interesting. The main elixirs heading, which is an <h2>, 
has the aquamarine color because there is already an <h2> rule in the CSS. 
But we need for that to be black. Then we’ve got the <h3>s in the elixirs, 
which need to be red. 


Jim: Yeah, no problem, we’ll just add a few more rules. 


Frank: But wait a sec...if we change the <h2> rule, or add an <h3> rule, 
then we’re going to change the heading colors on the entire page. We just 
want these colors in the elixirs section. 


Jim: Oh, good point. Hmmm...Well, we could use two classes. 


Frank: That would work, although it’s a bit messy. Anytime you cg 
add a new heading to the elixirs <div>, you'll have to remember to 
add it to the class. 


Jim: Yeah, well, c’est la vie. 


Frank: Actually Jim, before you use classes, go check out descendant y j 
selectors. I think they’ll work better here. C 
Frank J 


Jim: Descendant selectors? 


Frank: Right, they’re just a way of specifying a selector like “select an <h2> 
element, but only if it’s inside an elixirs <div>.” 


Joe: I’m not following. 
Frank: Okay, let’s step through this... 
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What are we trying to do? 


Let’s take a quick look at what we’re trying to do 
to the heading colors. 


What we have now 


Here’s just the main — 


heading elements in the 
lounge HTML. 


Right now, the CSS says to tolor <hl> 
and <h2> element text aquamarine. So a | 
all <hl> and <h2> elements are that 


color, even in the elixirs <div>. li? hl, h2 { 
color: #007e7e; 


And heve’s the rule specifying the <hl> 
and <h2> color in the “lounge-css” file. 


What we want 


We want the <hl> and <h2> in 
the main page to stay aquamarine. 


& 


find we want to change the <h2> 
and <h3> elements in the elixirs 
section to be black and red. ee 


hl, h2 { 
color: #007e7e; 


But if we change the existing rule for <h2>, we'll affect 
the font color of every <h2> in the main page. And if we 
add a new rule for <h3>, then any <h3>s that get added 
to the main page later will be ved, which is not what we _— 9 
want. Now, we Could use a class like Jim suggested, but 

we're going to give Frank’s idea a try First... 
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What we need is a way to select descendants 


What we’re really missing 1s a way to tell CSS that we want to only select 
elements that descend from certain elements, which is kinda like specifying that you 
only want your inheritance to go to the children of one daughter or son. Here’s 
how you write a descendant selector. 


Leave a space between 
the parent name and 
the descendant name. 


Here's the 


And here’s its 
parent element. descendant. 


div h2 { Write the rest of 


. 3 jour rule just like 
color: black; a singe 4, Here’s what this rule 


} selects in the lounge. 


This rule says to select 
any <h2> that is a 
destendant of a <div>. 


Now the only problem with this rule is that if someone created another <div> 
in the “lounge.html” file, she’d get black <h2> text, even if she didn’t want it. 


But we’ve got an id on the elixirs <div>, so let’s use it to be more specific about 
which descendants we want: 


Now the parent 

element is the 

element with And here’s its 
the id elixirs. descendant. 


Z 


#elixirs h2 { 
color: black; 


} This rule selects the same element. But it’s more 
specific, so if we added another <div> with an 
<h2> to the page, that’s okay because this rule 
selects only <hZ>s in the elixirs <div>. 


This rule says to select any <h2> that is a , 
descendant of an element with the id “elixirs 
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yur pe 


Your turn. Write the selector that selects only <h3> elements inside the elixirs <div>. 
In your rule, set the color property to #d12c47. Also label the elements in the graph 


below that are selected. 


eee no 


Questions 


pum 


Q: Descendant usually means child, grandchild, 
great-grandchild. Here, we’re just selecting the child 
descendants, right? 


A: That’s a really good point. The selector “#elixirs h2” means 
ANY descendant of elixirs, so the <h2> could be a direct child of 
the <div> or nested down inside a <blockquote> or another nested 
<div> (making it a grandchild) and so on. So a descendant selector 
selects any <h2> nested inside an element, no matter how deeply it 
is nested. 


Q: Well, is there a way to select a direct child? 
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Write your CSS vule here. 


a 


div id="calendar" 


A: Yes. For example, you could use “#elixirs > h2” to select <h2> 
only if itis the direct child of an element with an id of “elixirs”. 


Q: What if | need something more complex, like an <h2> that 
is the child of a <blockquote> that is in elixirs? 


A: It works the same way. Just use more descendants, like this: 


#elixirs blockquote h2 { 
color: blue; 


} 


This selects any <h2> elements that descend from <blockquote>s 
that descend from an element with an id of “elixirs”. 
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Changing the color of the elixir headings 


Now that you know about descendant selectors, let’s set the <h2> heading to 
black and the <h3> headings to red in the elixirs. Here’s how you do that: 


#elixirs h2 { 


color: black; 
L™ Here, we've using the descendant 


selectors to target just the <h2> 

and <h3> elements in the elixirs <div>. 
We're setting <h2> to black, and <h3> 
to a red color, using a hex Code. 


#elixirs h3 { 
color: #d12c47; 


} 


Lama 


A quick test drive... tae re PR ra at 
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Go ahead and add these new properties to the bottom of your 


“lounge.css” file, save, and reload “lounge.html”. ee apn, 


Lanne 2 
We've got black and red headings L-F4 Yih aie ana es 


Pe ee eres een 


in the elixirs section, and we eae nies. an 
haven't affected the aquamarine sere meets 
color being, used for <h2> meen Sea ey 


headings in the main page. 


Chee Phd bier 
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Fixing the line height 


Recall that in the last chapter, we made the line height of the text in 
the lounge a little taller than normal. This looks great, but in the elixirs 
we want our text to be a normal, single-spaced line height to match 
the handout. Sounds easy enough, right? Just set the Line-height 
property on the <div> and everything will be fine, because line height 
is inherited. The only problem 1s that the headings will also inherit the 
line height, and we'll end up with something like this. 


wee 


lf you set the line-height property on 
~~ the entire <div>, then it will be inherited fal 
#elixirs { by all elements in the <div>, including the 
line-height: lem; headings. Notice that the line height in 


} the heading is too small and the two lines lisivien Wrease 
are starting to run together. 


Here ave the font sizes “ N 
of the elements. We set 


body size is "small" 
body to “small”, So that’s 


inherited by elixirs. —_~> 


The reason that the line height for the elixirs heading is too 
small is because every element in the elixirs <div> inherits 
the line height of lem, or “1 times the font size of the 
elixirs element,” which in this case is “small”, or about 12 
pixels (depending on your browser). Remember, the elixirs 
<div> is inheriting its font size from the <body> element, The line-height of xX 
which we set to “small”. <h2> is set to | times 

the font size of = 7 
clixis, which is “small”, 


or about 12 pixels. 


div id="elixirs" 
size is "small" 


h2 is 120% of "small" 
What we really want 1s for all the elements in the elixirs 
<div> to have a line height that’s based not on the font 
size of the elixirs <div>, but rather the font size of each 
element itself. We want the <h2> heading to have a body line-height is 
line height that is 1 times its font size (which is 120% of 1:6tmes small! 
“small”), and the <p> should also have a line height of 1 


times its font size (which 1s “small”). How can you do this? 
Well, the line-height property is a bit special because 


div id="elixirs" 


you can use just a number instead of a relative measure—like We want <h2> to ; Une Nei ay Danes 
em or %—for it. When you use just the number 1, you’re have a line-height small", or about 12 pixels 
telling each element in the elixirs <div> to have a line that is | times 
height of | times its own font size, rather than the font size its own font, size; h2 is 120% of "small" 
of the elixirs <div>. Give it a try; set the line height of the that is, 4 pixels linesheight isd Vines 
elixirs <div> to 1, and you'll see that it fixes the heading. (120% of small). 120% of "small", or 
about 14 pixels 
hdd a line-height an : 
#elixirs { the elixivs <div> er 
line-height: 1; oe Lhe line-height The font-size of the p clement is “small” (p inherits 
} £ each clement in it: its font-size from the elixirs <div>), so it will have a 
° 


line-height of 12 pixels, which is what we want. 
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Look what you've accomplished... #3 


Take a look at the elixirs section now. You’ve 
completely transformed it, and now it looks 
just like the handout. And, other than adding a 
<div> and an id attribute to your HTML, you 
were able to do this with just a few CSS rules 
and properties. 


By now, you should be realizing just how 
powerful CSS is, and how flexible your web 
pages are when you separate your structure 


(HTML) from your presentation (CSS). You can 


give your HTML a whole new look, simply by 
changing the CSS. 


Wow, that's fantastic! 
You were able to make the 
elixirs section on the website 

look like the handout, with just 

alittle CSS. 


Remember, this is how the 
elixirs section looked when 


we started... A 


[arn — 
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and here's 
what it looks 


like now. Ny, | 


= hy 


Pe ee ee, ee ek ee a ee ee 


ut pea Pama oe 
jReniniialm ‘nai. Hint Cail 


wet 


ies ee ye 
ee ee ee 


oe | 


ee | 


Chee! Chiles 


Sd rie Ge oe, ee 
ink ested Sa aE Les 


Dad a9 eit 
edad oe eer aneeeret 
1a) 


free Wah ihre ae faiciklieed its Gp eta, AAT bee Peas ind Gd Bo 
Pies Seeded ES ae tae ee, hl eA ad rm hel bie 
wart ecg bee ord bo. Re me ee, ee ee 


you are here > 441 


www.it-ebooks.info 


specifying properties with shorthand 


It’s time to take a little shortcut 


You’ve probably noticed that there are quite a few CSS properties that seem to 

go together. For instance, padding-left, padding-right, padding-bottom, 

and padding-top. Margin properties are the same way. How about 
background-image, background-color, and background-repeat? Those all 
set different property values on the background of an element. Have you also noticed 
it gets a little tedious typing all those in? There are better things to spend your time 
on than typing all this, right? 


padding-top: Opx ; That’s a lot of typing just to 


padding-right: 20px; Z A pail ¢ 
padding-bottom: 30px; Peery sey manbeve 


padding-left: 10px; 


Well, here’s a special bonus for this chapter. You’re going to learn how to specify all 
those values without risking carpal tunnel. Here’s how: 


Here’s the old-school way of And here’s the new and improved 
specifying your padding, way to write them as a shorthand. 
padding-top: Opx; 2 
Pea tue ae padding: Opx 20px 30px 10px; 
padding-bottom: PX; 
padding-left: 10px; y) 6 1. 
a vr As 


You can use the same sort of shorthand with margins: 


margin-top: Opx; 

margin-right: 20px; margin: Opx 20px 30px 10px; 
margin-bottom: 30px; ’ >) 
margin-left: 10px; cad hy fog lepp 


KK Just like paddina, You can use ZR ' 2 


a shorthand to specify all your 
margin values with one property. 


If your padding or margins are the same value on all sides, 


you can make the shorthand really short: F 
vw» This says hat the padding 
padding-top: 20px ; should be 20 ee * 
padding-right: 20px; padding: 20px; ea eide of the bor: 


padding-bottom: 20px; 
padding-left: 20px ; 
nr, If all Your padding values are the same, 
then you can write it like this. 
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But there’s more... 


Here’s another common way to abbreviate margins (or padding): 


top and bottom 


margin-top: Opx; are the same. 


margin-right: 20px; wan 
margin-bottom: Opx; 


margin: Opx 20px; 


margin-left: 20px; <— right and left op "Ohy 
are the same. "16 hy , 
‘Oo. 
If the top and bottom, as well as the right and left, %, aed 


margins are the same, then you Can use a shorthand. 


And what about the border properties we mentioned? 
You can use a shorthand for those too. 


border-width: thin; ee Rewrite border 
border-style: solid; properties as one border: thin solid 8007e7a- 
border-color: #007e7e; property: These can be 


in any order you like. 


The border shorthand is even more flexible than margins or padding 


These are all perfectly 
valid border shorthands. 


border: solid thin; 
border: solid thin #007e7e; 


border: #007e7e solid; 


because you can specify them in any order you like. 


border: #007e7e solid thin; 
border: solid; 


wand don’t forget the shorthand for backgrounds 


You can also use shorthand for backgrounds: 


Like border, values Can go in any order 


in this shorthand. There are also a 
pebgout age: aeire few other values You can specify in the 


background-image: url(images/cocktail.gif) ; shorthand, like batkground—position. 
background-repeat: repeat-x; 


background: white url (images/cocktail.gif) repeat-x; 
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And even more shorthands 


No description of shorthands would be complete without mentioning font shorthands. 
Check out all the properties we need for fonts: font-family, font-style, 
font-weight, font-size, font-variant, and don’t forget line-height. Well, 
there’s a shorthand that wraps all these into one. Here’s how it works: 


Finall » You need to add 


Here are the properties that go into the your font families. You only 

font shorthand. Ordering matters here need to specify one font, 

unless we say otherwise... You must specify but alternatives are highly 
font size. encouraged. 


font: font-style font-variant font-weight font-size/line-height font-family 
SA!_P_—M/__” 
The line-height 


These values ave all optional. You Use Commas 
é i nee Property is optional. 

ne a i yary geen of If you want: to specify anes your 

i f ) ¢! nee to Come one, just put a7 right ont— amily 
crore the font-size Property. after the font-size meee 


Property and add 
your line height. 


So let’s give this a try. Here are the font properties for the lounge body: 


font-size: small; 


font-family: Verdana,\ Helvetica, Arial, sans-serif; 


line-height: 1.6em; 


Now let’s map those to the shorthand: 


We've not using any of these, but 
that’s okay—they’re all optional. 


L N— 


font: font-style font-variant font-weight font-size/line-height font-family 


And now let’s write the shorthand: 


font: small/1.6em Verdana, Helvetica, Arial, sans-serif; 


S 


And here’s the shorthand version. Wow, that’s quite a 
shorthand, huh? You're going to be able to double your time 
at the slopes (or on the beach) now. 
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Dumb Questions 


Q: Should | always use shorthand? 


A: Not necessarily. Some people find the long form more 
readable. Shorthands do have the advantage of reducing the size 
of your CSS files, and certainly they are more quickly entered 
because they require less typing. However, when there is a 
problem, they are a little more difficult to “debug” if you have 
incorrect values or the wrong order. So, you should use whichever 
form is more comfortable because they are both perfectly valid. 


Q: Shorthands are more complex because | have to 
remember the ordering and what is and isn’t optional. How do 


| memorize it all? 


A: Well, you'll be surprised how quickly it becomes second 
nature, but those of us in the “biz” have a little secret we like to 
call a “reference manual.” Just pick one up, and should you need 
to quickly look up property names or the syntax of a property, 


divs and spans 


To remember the ordering 
of the Padding and Margin 
shorthand values, think 
Of a clock labeled with 
top, right, bottom, and 
left. Then, always go in a 
clockwise direction: top 
to right to bottom to left. 


Margin: Opx 20px 30px 10px; 


ae 


eh 
ie Ay hi fe he 


just grab your handy reference manual and look it up. We're 
particularly fond of the CSS Pocket Reference by Eric Meyer. 
It's tiny and makes a great reference. 


It’s time to put all your new knowledge to work. You'll notice that at the bottom of the 
lounge, there’s a small section with copyright information that acts as a footer for the 
page. Add a <div> to make this into its own logical section. After you’ve done that, 


style it with these properties: 


font-size: 


50%; 


Let’s make the text really small. 
You know, FINE PRINT. 


text-align: center; 


line-height: normal; Ne And let’s center the text. 
margin-top: 30px; 


And lets add some top margin to give the 
footer a little breathing room. 


We've also setting the line-height to be 
“normal”, which is a keyword You haven't seen 
yet. “Normal” allows the browser to pick an 
appropriate size for the line height, which is 
typically based on the font. 


And while you're at it, have a look over the entire “lounge.css’ file. Is there anywhere you 
might want to simplify things with shorthands? If so, go ahead and make those changes. 
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another lounge assignment 


T saw the nice job you 
did on the elixirs. Can you 
give us a hand with the music 
recommendations on the site? 
We don't need much, just 
some simple styling. 


were fraey. seit PP i 2 wre play a Dee jnulg 
i me] abaut nha mise 
: 


ava oa aha SIDE. 
wat. eset fat you, we Kap & feat here 

iva gram abet af 

Enjay- 


*: ard 10 ieee 
updated wackly- 


rei 
ai ae L t mid 
F ak Ear Mort, vive be fev! Enid 


br vee sais oa 
pas 


[ee 
All the CD titles are And all the artists 
The lounge’s SJ in an italie font style. are in bold. 
resident DJ 


eR ANN 
POWER 


What do you think is the best way to style the CD and artists in the 
“What’s playing at the Lounge” section? 
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I was thinking we could 

just wrap <em> and <strong> 
elements around the CDs and 
artists. On most browsers, that's 
going to give us italic and bold. 


Frank: Yeah, but that’s kind of like using a <blockquote> just to 
indent text. What I mean is that we don’t really want to emphasize and 
strongly emphasize the CD and artists. We just want italic and bold. 
Plus, what if someone changes the style for <em> and <strong>? That 
would show up on the CDs and artists too. 


Jim: Well, I actually thought about that, but I couldn’t think of any 
other way to do it. I mean, this is just text in the same list item. It’s not 
like we have any way to style it. 


Frank: What do you mean? 


Jim: We can only style elements, and here we just have a bit of text, 
like, “Music for Airports, Brian Eno”. We’d need an element around 
each piece of text to be able to style them differently. 


Frank: Oh, right, right. I see what you mean. 


Jim: I suppose we could use something like: 


<div class="cd">Music for Airports</div> 


<div class="artist">Brian Eno</div>. 
But that’s a block element, so that is going to cause linebreaks. 


Frank: Ahhh, I think you’re on to something, Jim. There’s another 
element like <div> that is for inline elements. It’s called a <span>. That 
could work out perfectly. 


Jim: I’m game. How does it work? 


Frank: Well, a <span> gives you a way to create a grouping of inline 
characters and elements. Here, let’s just give it a try... 
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Adding <spanys in three easy steps 


<span> elements give you a way to logically separate inline content in the same 
way that <div>s allow you to create logical separation for block-level content. To 
see how this works, we’re going to style the music recommendations by first adding 
<span> elements around the CDs and artists, and then we’ll write two CSS rules to 
style the <span>s. Here’s exactly what you’re going to do: 


e You’re going to nest the CDs and artists in separate <span> elements. 


(2) You’re going to add one <span> to the “cd” class and the other to 
the “artist” class. 


3) You're going to create a rule to style the “cd” class with italic, and 
the “artist” class with bold. 


Steps one and two: Adding the <span>s 


Open your “lounge.html” file and locate the “Who’s playing at the Lounge” 
heading. Just below that, you’ll see the unordered list of recommendations. 


Here’s what it looks like: 
Each list item consists of a CD title, a 
{- ¢omma, and then the musié artist. 
<ul> 
<li>Buddha Bar, Claude Challe</1li> 
<li>When It Falls, Zero 7</1i> 
<li>Earth 7, L.T.J. Bukem</1i> 
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</1li> 


<1li>Music for Airports, Brian Eno</1li> 
</ul> 


Let’s try adding <span>s to the first CD and artist: bee 
Sdme tor the artist. Nest it 
in a <span> element, only this +i 
ay Next, add a ¢losi i » only ime 
Just add a <span> opening, tao, along with shin. the a ‘an tag put the <span> in the “artist” lass. 
the class attribute and a value of “ed”. 


= / vA oa \ 


<1i><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></1i> 
<li>When It Falls, Zero 7</1i> 

<li>Earth 7, L.T.J. Bukem</1i> 

<1li>Le Roi Est Mort, Vive Le Roi!, Enigma</1i> 

<1li>Music for Airports, Brian Eno</1li> 

</ul> 
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Step three: Styling the <span>s 


Before we move on, save the file and reload it in your browser. Like a <div>, by default a 
<span> has no effect on style, so you should see no changes. 


Now let’s add some style. Add these two rules to the bottom of your “lounge.css”’ file: 


We're going to add a rule for each of 
the new ¢classes, ed and artist. 
For CDs, we'll make 
.cd { the font style italie. 
font-style: italic; 


} 

.artist { And for artists we'll 
font-weight: bold; set the font—weight 

} to bold. 


Test driving the spans =e 


That’s it. Save and reload. Here’s what you'll see: 


arr Hebd PS Leap 5 
+ Caf oo bie ieee il 4 


ran - Nice job. This next 
pee Now the one's for you 
Me Pet roe rear Pivek was ea 
prey ata ht VST musié 
La are recommendation 
Tera ee eveere fos Lie has the correct 
Lt eT Eee! 


Se oy 


—— styling, 


| itbert's plaging at ihe Lounge 


ate eens ee en Te ee ee lt he ee. eed ade. 
a, ted Pee pala, va a Fe a et i, gh ee 


lewis ms, Clack Ste 

= eee it hete, era 7 

ee 

be Re A PRG Were Lie BH, ape 
= Pane for Ape. Pee Boo 
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your pencil 


<ul> 


You need to finish the job. Add <span> elements to the rest 
of the music recommendations and test your page. You'll 
find the solution in the back of the chapter. 


<1i><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></1i> 


<1li>When It Falls, 
<li>Earth 7, 


Zero 7</1i> 
L.T.J. Bukem</1i> 
<li>Le Roi Est Mort, Vive Le Roi!, 


Enigma</li> 


<1i>Music for Airports, Brian Eno</li> 
</ul> 


Q: When do | use a <span> rather 
than another inline element like <em> or 
<strong>? 


A: As always, you want to mark up your 
content with the element that most closely 
matches the meaning of your content. So, 
if you are emphasizing words, use <em>; 

if you're trying to make a big point, use 
<strong>. But if what you really want is to 
change the style of certain words—say, 

the names of albums or music artists on a 
fan site web page—then you should use a 
<span> and put your <span> elements into 
appropriate classes to group them and style 
them. 
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Q: Can | set properties like width on 
<span> elements? Actually, what about 
inline elements in general? 


A: You can set the width of inline 
elements like <span>, <em>, and <strong>, 
but you won't notice any effect until you 
position them (which you'll learn how to do in 
the next chapter). You can also add margin 
and padding to these elements, as well as 
a border. Margins and padding on inline 
elements work a little differently from block 
elements—if you add a margin on all sides 
of an inline element, you'll only see space 
added to the left and right. You can add 
padding to the top and bottom of an inline 
element, but the padding doesn’t affect the 
spacing of the other inline elements around 
it, so the padding will overlap other inline 
elements. 
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Images are a little different from other inline 
elements. The width, padding, and margin 
properties all behave more like they do for 

a block element. Remember from Chapter 
5: if you set the width of an image using 
either the width attribute in the <img> 
element or the width property in CSS, the 
browser scales the image to fit the width 
you specify. This can sometimes be handy if 
you can’t edit the image yourself to change 
the dimensions, and you want the image to 
appear bigger or smaller on the page. But 
remember, if you rely on the browser to scale 
your image, you may be downloading more 
data than you need (if the image is larger 
than you need). 


divs and spans 


Hey, I know you think you're about done, 
but you forgot to style the links. They're 
still that default blue color, which kinda 
clashes with our site. 


ie BRAUN 
Think about the <a> element. 
Is there something about its 


style that seems different from 
other elements? 


you are here > 451 


www.it-ebooks.info 


how to style links 


The <a> element and its multiple personalities 


Have you noticed that links act a little differently when it comes 
to style? Links are chameleons of the element world because, 
depending on the circumstance, they can change their style at a 
moment’s notice. Let’s take a closer look: 


& Cow = File | chapbar 0 lounge, leurrge hecal 


ee ee ee ee 


Bil woer Do ond fel, The 
lair wines mee with chal 


Here’s a link you've never clicked on 
before. This is called an “unvisited link,” 
or just ‘link,” and it’s blue by default. 


G 


Dodi iS Gree EVER Poe are 
cred Ol cour OD vane cee tual 
Diane 


7a 


And here’s a link you 
have clicked on before. 
We tall these “visited 
links.” Usually, visited 
links are displayed 


Hdach Eiralrs Berees 


WONT To ey a rey? 
Try gir Bleck Grain Eros 
eli; mice with flack 
emir bee anc or a ouch of 
epee. Your ben will 
eek: pou for the. besos. 


Joi wu acre Serie for Ree 
and a8 oor obher wonderful 
milo 


ig Far & 
ef Gh? wAjral 


| What's playing at the Lounge 
ina different color 

Ag lh ks <5 Ware Frequently gaa gocut ihe me owe play et ee lounge, ard roo 
than unvisited lin | mares, Te graseanall) Just ar pou, ee Wem ae Mad ene com the: alte, 
that you can tell the | updated waskiy. Crap. 


difference. In most 
browsers, visited links 
ave purple by default. 


And if you hold your mouse over a link without 
clicking, this is called “hovering.” On some 
browsers you'll see a tool tip that displays the 
text of the “title” attribute. And if you pay 
close attention, on some web pages, you'll see a 
different style as you hover. 


Unlike other elements, the style of an <a> element changes depending 
on its state. If the link has never been clicked on, it has one style, and 
if it has been clicked on, another. And if you hover over a link, it can 
have yet another style. Perhaps there’s more to styling <a> elements 
than meets the eye? You betcha...let’s take a look. 
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based on their state? 


A link can be in a few states: it can be unvisited, visited, or 
in the hover state (and a couple of other states too). So, how 
do you take advantage of all those states? For instance, it 
would be nice to be able to specify what the visited and 
unvisited colors are. Or maybe highlight the link when the 
user is hovering over it. If only there were a way... 


Well, of course there is, but if we told you it involves using 
pseudo-classes you'd probably just decide you’ve read enough 
for the night, and close the book. Right? But hold on! 
Pretend we never said the word pseudo-class, and let’s just 
look at how you can style your links: 


\ lowed by a: (eolon), 
Notite we have the element <a>, fol 
followed by the state we want to select. Make sure You 
have any spaces in these selectors (e-9., a : link won't work! 


p- This sele¢tor is applied 
a:link { YL» to links when they are 

color: green; in an unvisited state. 
} 


a:visited { Zz And this selector is 
color: applied to links when 
} they are visited. 


a:hover { . 
color: yellow; And this selector 


} is applied when you 


hover over a link. 


Exercise 


Add these rules to the bottom of your “lounge.css” 


file and then save and reload “lounge.html”. Play 
around with the links to see them in each state. 
Note that you might have to clear your browser 
history to see the unvisited color (green). 
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Q: What happens if | just style the <a> 
element like a normal element? Like: 


a { color: red; } 


A: You certainly can do that, but then your links 
will look the same in all states, which makes your 
links less user-friendly because you can't tell which 
ones you've visited and which ones you haven't. 


c) What are the other link states you 
mentioned? 


A: There are two others: focus and active. The 
focus state occurs when the browser focuses on 
your link. What does that mean? Some browsers 
allow you to press your Tab key to rotate through all 
the links on your page. When the browser comes to 
a link, that link has the “focus.” Setting a value for 
the focus pseudo-class is helpful for accessibility 
because those who need to use a keyboard to 
access a link (as opposed to a mouse) will know 
when they've got the right link selected. The active 
state occurs when the user first clicks on a link. 


Q: Can’t my links be in multiple states at 
the same time? For instance, my link could be 
visited, have the mouse hovering over it, and 
the user could be actively clicking on it all at 
once. 


A: They sure can. You determine which style is 
applied by the ordering of your rules. So, the right 
ordering is generally considered to be: link, visited, 
hover, focus, and then active. If you use that 
ordering, you'll get the results you expect. 


Q: Okay, | give. What’s a pseudo-class? 


A: Only one of the most confusing words in 
the CSS language. But as you've seen, styling 
links is pretty straightforward. So, let's talk about 
pseudo-classes... 
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more on pseudo-classes 


Head First: Welcome, Pseudo-class. It’s a 
pleasure to have you here. I must confess that 
when they first asked me to do this interview, I 
drew a blank. Pseudo-class? The only thing that 
came to mind was that ’80s Phil Collins song. 


Pseudo-class: Uh, that would be Sussudio. 
My name is Pseudo. 


Head First: Oops. Honest mistake. Maybe we 
could start there. Can you tell us a little about 
where Pseudo came from? 


Pseudo-class: Pseudo usually means 


something that looks like the real thing, but isn’t. 


Head First: And the last name? Class? 


Pseudo-class: Everyone knows what a CSS 
class is. It’s a grouping you create to place 
elements in so you can style them together. Put 
“pseudo” and “class” together and you have a 
pseudo-class: it acts like a class, but it isn’t a real 
class. 


Head First: What’s not real about it if it acts 
like a class? 


Pseudo-class: Okay, open up an HTML file 
and look for the class : visited, or : link, or 
:hover. Let me know when you find one. 


Head First: I don’t sce any. 


Pseudo-class: And yet, a: link, 
a:visited, and even a:hover all allow you 
to specify style, just like they were classes. So, 
those are pseudo-classes. In other words, you 
can style pseudo-classes, but no one ever types 
them into their HTML. 


The Pseudo-elass Exposed 


This week’s interview: 
Getting to know the pseudo-class. 


Head First: Well then, how do they work? 


Pseudo-class: You can thank your browser 
for that. The browser goes through and adds all 
your <a> elements to the right pseudo-classes. 
If a link’s been visited, no problem; it goes 

into the : visited pseudo-class. Is the user 
hovering over a link? No problem, the browser 
throws it in the : hover pseudo-class. Oh, now 
the user isn’t hovering? The browser yanks it 
out of the “hover” pseudo-class. 


Head First: Wow, I never knew. So there are 
all these classes out there that the browser is 
adding and removing elements from behind the 
scenes. 


Pseudo-class: That’s right, and it’s damned 
important to know about; otherwise, how would 
you give your links style that adapted to what 
state the link was in? 


Head First: So, Pseudo, do you just do links? 


Pseudo-class: No, I do other elements too. 
Modern browsers already support pseudo- 
classes like : hover on other types of elements. 
And there are some other pseudo-classes, too. 
For instance, the pseudo-class : first-child 
is assigned to the first child of any element, like 
the first paragraph in a <blockquote>. And 
you can even select the last paragraph of a 
<blockquote> with the : last-child pseudo- 
class. I’m quite versatile, really. 


Head First: Well, I’ve certainly learned 
something in this interview. Who knew that 
song was actually called “Sussudio”?! Thanks 
for being here, Pseudo-class. 
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Putting those pseudo-classes to work 


Okay, let’s be honest. You’ve probably just learned the most important thing in this 
book: pseudo-classes. Why? No, no, not because they allow you to style elements 
based on various “classes” your browser decides they belong to, like : Link or 

: first-child. And, no, not because they give you really powerful ways to style 
elements based on things that happen while your visitors are using your page, like 
:hover. It’s because the next time you’re in that design meeting and you start talking 
about pseudo-classes with a real understanding, you’re going to move to the head of the 
class. We’re talking promotions and bonuses...at a minimum, the awe and respect of 
your fellow web buddies. 


So, let’s put those pseudo-classes to good use. You’ve already added some pseudo-class 
rules to your “lounge.css” and they had a dramatic impact on the look of the links, but 
they’re probably not quite right for the lounge. So let’s rework the style a little: 


: . dant selector 
‘a chanoe here. We re using a desten 
panes srl pseudo—Class- The first selector nie 
re leet. any unvisited <a> element that is ners " a 
le vent ith the id “elixivs”. So we're styling, JU 
elem wi 


links inside wens 


#elixirs a:link { 2— On these two, we're setting the color. 
color: #007e7e; For unvisited links, a nice aquamarine... 
} 
—_ Rine and for visited links we're 
#elixirs a:visited { J (~ using a dark gray. 
color: #333333; 


} 
#elixirs a:hover { — Ny indie: ule: When 


cone ey re the user is hovering over the link, we're 
aioe HEARERS. y/ Changing the background to red. This 
; makes the link loo highlighted when You 


pass the mouse over it. Give it a try! 


Open up your “lounge.css” and rework your a:link, a:visited, and a:hover 


rules to use the new descendant selector and the new style definitions. 
Save, reload, and turn the page. 
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Test drive the links SE reser “a 


7 A TD Slee) cha pert Of bo ge tounge hire wa 


When you reload, you should see some new 


style in the elixirs section. Keep in mind, to see Chal Chiller 


the unvisited links you may have to clear your 


re dikinrgl hge. ths 


browser’s history; otherwise, the browser will elisie mines rrighe with cha 
7 ae P ephied dined adie an cates 
know you’ve visited these links before. Efepoolahe Mick Fest a 
Oo Pacey Lied Ree ee eb 
Ps | 


inck Brain Brew 


WAST bo boat Ydee erp? 
Trey ur Blick Bey Boren 
cin, Pe IO beth 
nh Tes ord jut oo Coe oF 
Sopresgo, Voc beg eel 
Cet sau for thee beep at: 


Now we've got green unvisited 


- : Join ua gry ewendng tor be 
links, gray visited links, and a (pall tg Sa ecierful 


very Cool red highlight. when = 
you hover over the link. Hed rer Lange Ebi 
What's playing at tha Lounge 


‘Wiha Bacay Gabe mice ed PPI ee ply 20 the loge, ane Bo 
mites, Fie great mutt. Just far pau, se kao a lle bere on -wte, 
Updated weet, Erjce 


Your job is to give the “detailed directions” link in the lounge some style. Just like the 
elixirs link, we want all unvisited links to be aquamarine, and all visited links to be gray. 
However, we don’t want the other links in the lounge to have any hover style...that’s 
unique to the elixirs. So, how would you do it? Fill in the blanks to give the “detailed 
directions” link, and any other links you might add to the lounge later, this style. Check 
your answer in the back of the chapter and then make the changes in your lounge files. 


#007e7e; } 
#333333; } 
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Isn’t it about time we talk about the “cascade”? 


Well, well, we’re quite far into this book (457 pages to be exact) and we still haven’t 
told you what the “Cascade” in Cascading Style Sheets is all about. Truth be told, you 
have to know a lot about CSS to fully understand the cascade. But guess what, you’re 
almost there, so wait no more. 


Here’s just one last piece of information you need to understand the cascade. You 
already know about using multiple stylesheets to either better organize your styles 
or to support different types of devices. But there are actually some other stylesheets 
hanging around when your users visit your pages. Let’s take a look: 


v~ First, there are all 


the stylesheets you've Note that there is a way for a reader 

written for Your page. to attually override your styles To do 
that he puts “limportant? at the end 
of a property declaration. 


But some browsers also allow users 
a. to create their own styles for 


HTML elements. If your stylesheet 
doesn’t define these styles, the 


user's stylesheet is used instead. 


The author 
(that’s you!) 


And Finally, you already 
know that the browser 


itself maintains a set of 

default styles that are 
The reader used if you don’t define 
(your users) the styles for an element. 


These are also the styles 
that are used if you don't 
have any author or reader 


When the browser needs to determine stylesheets. 


which style to apply to an element, it uses 
all these stylesheets. Priority is given First 
to the author's styles (that is, Your styles), 
then to the reader's styles, and then 


Finally to the browser's default styles. The browser 
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So, to review, as the page authors, we 
can use multiple stylesheets with our HTML. 
And the user might also supply his own styles, 
and then the browser has its default styles, 

too. And on top of all that, we might have 

multiple selectors that apply to the same 
element. How do we figure out which styles 


an element gets? 


That’s actually another way of asking what 
cascade does. The cascade is the way the 
browser decides, given a bunch of styles 

in a bunch of stylesheets, which style is 
going to be used. To answer that question, 
we need to bring everything together—all 
the various stylesheets hanging around, 

the rules, and the individual property 
declarations in those rules. 


In the next two pages, we’re going to step 
through the nitty-gritty details of how all 
this works. The details involve a lot of 
sorting and various details of determining 
which rules are the most specific with 
respect to an element. But here’s the payoff: 
after going through the next two pages, 
you'll be able to get to the bottom of any 
styles that don’t seem to be applied in the 
way you expect, and further, you’re going 
to understand more about the cascade than 
99% of web page developers out there 
(we’re not kidding). 
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The cascade 


For this exercise, you need to “be the browser.” Let’s say you’ve got an <h1> 
element on a page and you want to know the font-size property for it. Here’s 
how you do it: 


Step one: An 


f— 
Gather all your stylesheets together. LE 
For this step you need all the stylesheets: the stylesheets the web page 


author has written, any stylesheets that the reader has added to the mix, 
and the browser’s default styles. (Remember, you’re the browser now, so 


you have access to all this stuff!) —— 
Step two: | | 7 | 
==), 


Find all the declarations that match. 

We’re looking specifically for the font-size property, so look at all the 
declarations for font-size that have a selector that could possibly select the 
<h1> element. Go through all the stylesheets and pull out any rules that match 


<h1> and also have a font-size property. Recenbur we 
mm 


mentioned that the 
reader could put 
Now take all your matches, and sort them. important on his CSS 
Now that you’ve got all the matching rules together, sort them in the order of properties, and if 
author, reader, browser. In other words, if you wrote them as the author of the i he does that, those 
page, then they are more important than if the reader wrote them. And, in properties Come first 
turn, the reader’s styles are more important than the browser’s default styles. when You sort, 


Step three: 


Step four: 


Now sort all the declarations by how specific they are. 

Remember, we talked about this a little, way back in Chapter 7. You can 
intuitively think about a rule being more specific if it more accurately selects 
an element; for instance, the descendant selector “blockquote h1” is more 
specific than just the “h1” selector because it only selects <h1>s inside of 
<blockquote>s. But there 1s a little recipe you can follow to calculate exactly 
how specific a selector is, and we’ll do that on the next page. 


Step five: 


Finally, sort any conflicting rules in the order they appear in their 

individual stylesheets. 

Now you Just need to take the list, and order any conflicting rules so that the ones 
appearing later (closer to the bottom) of their respective stylesheets are more important. 
That way, if you put a new rule in your stylesheet, it can override any rules before it. 


That’s it! The first rule in the sorted list is the winner, and its font-size property is 
the one to use. Now let’s see how you determine how specific a selector is. 
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Welcome to the “What's my specificity?” game 


To calculate the specificity, you start with a set of three numbers, like this: 


000 


And then we just tally up various things from the selector, like this: 


Does the selector 


Does the selector have any classes 
have any ids? One or pseudo-classes? Does the selector have 
point each. One point each. any element names? 


“Ss | One point for each. 


000 


For instance, the selector “hl” has one element in it, so you get: <——~ Both “HP” and “hl blue” have one 
clement, so they both get a! in 


Read this as the > 0 0 ] the rightmost number Column. 
number one. va 


“hl.blue” also has one Class, so it gets 
As another example, the selector “h1.blue” has one element and a al in the middle number column. 


one class, so you'd get: 


Read this as the 0 ] ] Neither has ids in its selector, 
number eleven. 7 J 50 they both get 2 0 in the 
left number Column 


After you’ve tallied up all the ids, classes, and elements, the bigger the specificity 
number, the more specific the rule. So, since “h1.blue” has a specificity of 11, it is 
more specific than “h1”, which has a specificity of 1. 


yur pe 


Try your hand at calculating the specificity of these selectors using the rules above: 


h1.greentea ol lip em 


pimg green span.cd 


a:link #elixirs h1 #sidebar 
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Dumb Questions 


Q: Can you say more about the 
limportant thing? 


Q: What makes a specificity number 
bigger than another? 


+ Just read them like real numbers: 100 
(one hundred) is bigger than 010 (ten) which 
is bigger than 001 (one), and so on. 


A: The reader can override a style by 
putting an “limportant” on the end of his 
property declarations like this: 


hl { 


Q: What about a rule like “h1, h2”; font-aise* 260% 14 ts 


what is its specificity? } 
* Think of that as two separate rules: and this will override any author styles. 

an “h1” rule, which has a specificity of “001” 

and an “h2” rule that also has a specificity 

of “001”. 


Putting it all together 


Woo hoo! It’s time for an example. Say you want to know the color 
property for this <h1> element: 


<h1 class="blueberry">Blueberry Bliss Elixir</h1> 


Let’s take this through all the cascade steps: Remember, you're 
° J a—™ the browser, because 


Step one: you're trying to 
Figure out how to 
Gather all your stylesheets together. display this <hl> 
element. 


hi { 
color: #efefef; 


} 


body hl { 


hl.blueberry { 
color: blue; 


} 


Usually, you're the author 
(the person writing the 
CSS). But right now, oe 


d 
youre the browser. 


The author 
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Q: | can’t get the reader’s stylesheet, 
so how can | ever figure out the way the 
cascade works? 


A: You can’t, but look at it this way: if 

the reader overrides your styles, then that 

is really beyond your control. So just make 
your pages look like you want them to using 
your styles. If the reader chooses to override 
them, then he'll get what he asks for (for 
better or for worse). 


hl { 
color: black; 


=> 
The browser 
4 


That's you (for now). 


color: #cccccc; 


The reader 4 
The person using, the browser 
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Step two: 


Find all the declarations that match. 


Here are all the rules that 
could possibly matth the <hl> 
element and that contain 
the color property. 


body hl { 
Reader color: 
} 
hl { 
Browser ¢ color: 
} 
Vas Ai 
color: 
} 
Author 


#eccccc; 


black; 


#tefefef ; 


Step three: 


Now take all your matches, and sort them by 


author, reader, browser. 


hl { 


color: #efefef; 


Author : 


Reader 


Browser 


Step four: 


hi.blueberry { 
color: blue; 


} al 


body hl { 
color: #cccccc; 


} 


hl { 
¢ color: 
} 


black; 


hl.blueberry { 
color: blue; 


} 


Here we've just 
reordered the 
rules by author, 
then reader, and 
then browser. 


Now sort the declarations by how specific they are. To do that, we need to 
first calculate each specificity score, and then reorder the rules. 


hi { 
color: #efefef; 


} 


hi.blueberry { 
color: blue; 

} 

body hl { 
color: #cccccc; 

} 

hil { 
color: black; 


} 
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VA 


001 
011 


color: blue; 
The rule with } 
the blueberry 


hl.blueberry { 


011 
001 


class moves hl { 
to the top color: #efefef; 
because it has } : 
i body hl { 
0 0 2? ey aoine: #eccccc; 0 0 1} 
} 
hl { 
0 0 1 color: black; 0 0 1 


} 
Notice that we only sort within the author, 
reader, and browser categories. We don't re-sort 
the entire list, or else the “body hl” vule would 
move above the “hl” rule set by the author. 
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Step five: 


Finally, sort any conflicting rules in the order 
that they appear in their individual stylesheets. 


We've okay here, because we don't have 
any Confli¢ting rules at this point. The 
blueberry, with a store of II, is the clear 
winner. [£ there had been two rules with 
a store of Oll, then the rule appearing 
latest would be the winner. 


We have a winner... 


divs ¢ spans 


hl.blueberry { 
color: blue; 


fr } Author 

hi { 

color: #efefef; 
} 
body hl { 

e 

color: #ceccccc; R ader 
} 
hi { 

color: black; Browser 
} 


After sweating through the first choice of elements, the 
sorting, more sorting, and being judged on specificity, 
the “hi.blueberry" rule has risen to the top. So the color 


property in the <h1> element will be blue. 


there,are no 7 
b Questions 


pum 


Q: So, one more time: | get that the lower in the CSS file, the 
higher the precedence, but how does having multiple links to 
stylesheets in my HTML work? 


A: It's always top to bottom, whether it is in the same CSS file or 
not. Just pretend that you inserted the CSS all together right into your 
file in the order the files are linked. That's the order that counts. 


OF So when you sort for specificity, you don’t re-sort 
everything? 


A: No. Think of each time you sort as refining what you've done 
before. So first you sort for author, reader, browser. Then, within each 
of those sortings, you sort for specificity. And then, for any elements 
that have the same specificity, you sort again based on the ordering 
in the stylesheets. 


Q: Do readers really make their own stylesheets? 


A: By and large, no. But there are cases where people with visual 
impairments do, and of course you've always got the crowd that just 

has to tinker with everything. But since each reader is controlling only 
how she sees things, it really shouldn't factor into your designs. 


Q: How much of this do | really need to remember? 


A: You're going to develop some intuition for how all these 
stylesheets fit together, and on a day-to-day basis that intuition will 
get you a long way. Every once in a while, though, you'll see a style 
popping up in your pages that just boggles your mind, and that’s 
when you fall back on your training. You'll be able to work through 
the cascade, and before you know it, you'll know exactly what's 
happening in your page. 


463 


www.it-ebooks.info 


when the cascade doesn’t provide a value 


464 


Chapter 10 


So, what happens if, after all 
this, I still don't have any rules 
with a property declaration for 

the property value I'm trying to 


figure out? 


Ah, good question. We actually talked about this a little in 
Chapter 7. If you don’t find a match for the property in 
any rules in the cascade, then you try to use inheritance. 
Remember that not all properties are inherited, like 
border properties, for instance. But for the properties that 
are inherited (like color, font-family, line-height, 
and so on), the browser looks at the ancestors of the 
element, starting with its parent, and tries to find a value 
for the property. If it does, there’s your property value. 


Got it. Hey, but what if the 
property isn't inherited or 
I can't find a value in the 

ancestor's rules? Then what? 


Then the only thing left to do is fall back 
on the default values that are set in the 
browser’s stylesheets, and all browsers 
should have default styles for every element. 


Oh, and why 


is this called the 
“cascade” anyway? 


The name “cascade” was chosen because of the 
way that styles coming from multiple stylesheets can 
all “cascade” down into the page, with the most specific 
styling being applied to each element. (If that doesn’t clear 
things right up for you about why it’s called cascade, don’t 
feel bad. It didn’t make it any clearer for us, either. Just 
call it “CSS” and move on.) 
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STOP! Do this exercise before 
going on to the next chapter! 
SUPER 


‘ BRAIN 
POWER 


This is a special brain power—so special that we’re going 
to let you think about it between chapters. Here’s what 
you need to do: 


Open the file “lounge.html” and locate the elixirs <div>. 


Move the entire elixirs <div> section to the top of the 
file so it’s just below the paragraph that contains the 
lounge logo. 


Save and reload your page. What changed? 
Open the file “lounge.css”. 


Locate the “#elixirs” rule. 


6} Add this declaration at the bottom of the rule: 


float: right; 


7) Save your file, and reload the page in your browser. 


What changed? What do you think this property does? 
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aa POINTS 


<div> elements are used to group related elements 
together into logical sections. 


Creating logical sections can help you identify the main 
content areas, header, and footer of your page. 


You can use <div> elements to group elements 
together that need a common style. 


Use nested <div> elements to add further structure to 
your files for clarity or styling. But don’t add structure 
unless you really need it. 


Once you have grouped together sections of content 
with <div> elements, you can style the <div>s just like 
you would any other block element. For example, you 
can add a border around a group of elements using 
the border property on the <div> they are nested in. 


The width property sets the width of the content area 
of an element. 


The total width of an element is the width of the 
content area, plus the width of any padding, border, 
and margins you add. 


Once you set the width of an element, it no longer 
expands to fit the entire width of the browser window. 


Text-align is a property for block elements that aligns 
all inline content in the block element, to the center, left 
or right. It is inherited by any nested block elements. 


You can use descendant selectors to select elements 
nested within other elements. For instance, the 
descendant selector 

div h2 {...} 
selects all <h2>s nested in <div> elements (including 
children, grandchildren, etc.). 


You can use shortcuts for related properties. For 
instance, padding-top, padding-right, padding-bottom, 
and padding-left are all related to padding, and can be 
specified with one shortcut rule, padding. 


Padding, margin, border, background, and font 
properties can all be specified with shortcuts. 


The <span> inline element is similar to the <div> 
element: it is used to group together related inline 
elements and text. 


Just like with <div>, you can add <span> elements to 
classes (or give <span> elements unique ids) to style 
them. 


The <a> element is an example of an element with 
different states. The main <a> element states are 
unvisited, visited, and hover. 


You can style each of these states separately with 
pseudo-classes. The pseudo-classes used most often 
with the <a> element are ‘link, for unvisited links; 
visited, for visited links; and :hover, for the hover state. 


Pseudo-classes can be used with other elements too, 
not just <a>. 


Additional pseudo-classes are the :hover, :active, 
‘focus, :first-child, and last-child pseudo-classes, 
among others. 
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Since you've got 4 
gave the 
worry; he 


HIMLcross on Vacation 


Super Brat 


HTMLcross 2 vacatio 
‘11 be back in the next one. 


in Power to work on, we 
n in this chapter. Don’t 
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Solution 
Here’s a box that has all the widths labeled. Your job was to 
figure out the width of an entire box. Here’s the solution. 


committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you're just 

| stopping by to check in on email over 
an clixir, or are here for an out-of- 
the-ordinary dinner, you'll find our 
knowledgeable service staff pay attention] i 


‘Onr guarantee: at the lounge, we're | 


to every detail, If you're not fully satisfied 
have a Blucberry Bliss Elixir on us 


Wy 


200 pixels 


Is 


304+24+5+200+10+2 +20 = 269 pixels W 


ixels 


30 Pi 
Z pixels 
5 pixels 


10 pixels 
2 pixels 
20 pixel 


your pencil eo 
Solution 


Lemon Breeze 
The 


So now that you understand widths, what's the total width of the elixirs box? To start with, 
we know the content area is 200 pixels. We've also set some left and right padding that 

affects the width, as well as a border that’s set to “thin”. Just assume a thin border is 1 pixel 
thick, like it is on most browsers. And what about margins? We set a left margin value, but 


no right margin value, so the right margin is 0 pixels by default. | 


Your job was to figure out the total width of the elixirs <div>. Here's the solution. Chai Chiller 


Not yourtra 

tional ca 

tis et minos manne 
‘nd 


20 +204 200414140470 = 262 
Fr $$ 6 & B&B @ Lf 
<3 3 s s s s rs Black Braj 
= 3 © § & e 3 Stolle 
oO oO s a) memory? Try our ou, 
~ SB 222 2 Sees 
a rj we => lusta touch gon @8 and 
v => C} +2 SDS ¢ od Your brain wit hank sae 
— a xy 1 for the b 


Join us ar 
NY evening for th 
. thes 
ur Wondertul efx, 4 al 


Your turn. Write the selector that selects only <h3> elements inside the elixirs 
<div>. In your rule, set the color property to #d12c47. Also label the elements 
in the graph below that are selected. Here's the solution. 


elixirs h3 { 


<_-~, 
tolor: #d12¢47; Here’s the rule. We select any <h3> 
descendant of an element with the id elixirs. 
And here's what the graph looks like. 


div id="calendar" 
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It’s time to put all your new knowledge to work. You'll notice that at the bottom of the 
° lounge, there’s a small section with copyright information that acts as a footer for the 
Exetcise page. Add a <div> to make this into its own logical section. After you’ve done that, 
OLUtiON style it with these properties: 


Let’s make the text really small. 


sala You know, FINE PRINT. 
text-align: center; 

line-height: normal; eee find let’s center the text. 
margin-top: 30px; 


We've also setting the line-height 


to be “normal”. 


And let’s add some top margin to give the 
footer a little breathing room. 


Place <div> tags 
around the copyright And give it an id named “footer”. 


information. 
7 ra 


<div id="footer"> 
<p> 
écopy; 2012, Head First Lounge<br> 


All trademarks and registered trademarks appearing on 


this site are the property of their respective owners. 


</p> 
</div> a oe fn even better solution would be to change 


<p> to <small>, which is an element designed 
specifically for “small print.” Try it! 


And here’s the CSS for the footer. 


#footer { ee 


font-size: 50%; 
text-align: center; 
line-height: normal; 
margin-top: 30px; 
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r pencil 
ral tin 


Your job was to finish adding the <span> elements to the rest of the music 
recommendations and test your page. Here's the solution: 


<ul> 
class="cd">Buddha Bar</span>, 


<1li><span 


<span class="artist">Claude Challe</span></1i> 
<li><span class="cd">When It Falls</span>, 

<span class="artist">Zero 7</span></1i> 
<1i><span class="cd">Earth 7</span>, 

<span class="artist">L.T.J. Bukem</span></1i> 


<1i><span class="cd">Le Roi Est Mort, Vive Le Roi!</span>, 


<span class="artist">Enigma</span></1i> 
<1i><span class="cd">Music for Airports</span> 


<span class="artist">Brian Eno</span></1i> 


</ul> 


What's playing at the Lounge 


We're frequently asked abauk the music we play at the lounge, and aa wonder, 
ifs great stuf. Just for you, we keep a list here on the site, updated woolly. 
Enjoy. 


Suddha Gar, Gaude Challe 
« Miho Jt Foils, dena F 

« Earth 7, LT. Bukem 

« Le Rel fer Mort, Wye Le Rell, Enigma 
Music for AVrports, Brian Ene 
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ut pencil 
Your job is to give the “detailed directions” link in the lounge some style. Just like the 
elixirs link, we want all unvisited links to be aquamarine, and all visited links to be gray. 
However, we don’t want the other links in the lounge to have any hover style...that’s 
unique to the elixirs. So, how would you do it? Fill in the blanks to give the “detailed 


directions” link, and any other links you might add to the lounge later, this style. Here’s 
the solution. 


a:link { color : #007e7e; } 
avisited #333333; } 


tolor 


pencil 
lution Try your hand at calculating the specificity of these selectors using 
the cascade rules. Here’s the solution. 


. 
"" 


h1.greentea 0 | | ollip 003 em 00! 
pimg 002 -green 010 span.cd oll 


a:link oll #elixirs h1 lol #sidebar AOO 
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- 
Arranging Elements * 


You can bet all my divs and 
spans are in the right place. 


It’s time to teach your HTML elements new tricks. We're not 
going to let those HTML elements just sit there anymore—it’s about time they get 

up and help us create some pages with real layouts. How? Well, you’ve got a good 
feel for the <div> and <span> structural elements and you know all about how the 
box model works, right? So, now it’s time to use all that knowledge to craft some real 
designs. No, we're not just talking about more background and font colors—we’re 
talking about full-blown professional designs using multicolumn layouts. This is the 


chapter where everything you’ve learned comes together. 
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Vid you do the Super Brain Power? 


If you didn’t do the SUPER BRAIN POWER at 
the end of the last chapter, then march right back 
there and do it. It’s required. 


Okay, now that we have that out of the way, at the 
end of the last chapter, we left you with a bit of 

a cliff-hanger. We asked you to move the elixirs 
<div> up under the logo, and then add one little 
property to the elixirs rule in your CSS, like this: 


float: right; ya 


And, wow, what a difference one property can 

make! All of a sudden, the page has gone from a oS 
fairly ordinary-looking web page to a great-looking 

web page with two columns. It’s immediately more 
readable and pleasant to the eye. 


So what’s the magic? How did this seemingly 
innocent little property produce such big effects? 
And can we use this property to do even more 
interesting things with our pages? Well, of course, 
but first, you’re going to need to learn how a 
browser lays out elements on a page. Once you 
know that, we can talk about all kinds of ways you 
can alter how it does that layout, and also how you 
can start to position your elements on the page. 


Here’s the good news: you already know about 
block elements and inline elements, and you 

even know about the box model. These are the 
real foundations of how the browser puts a page 
together. Now all you need to know is exactly how 
the browser takes all the elements in a page and 
decides where they go. 
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layout and positioning 


Use the Flow, Luke 


The Flow is what gives a CSS master his power. It’s an 
energy field created by all living things. It surrounds us 
and penetrates us. It binds the galaxy together...oh, sorry. 


Flow 1s actually what the browser uses to lay out a page 
of HTML elements. The browser starts at the top of any 
HTML file and follows the flow of elements from top to 
bottom, displaying each element it encounters. And, just 
considering the block elements for a moment, it puts a 
linebreak between each one. So the first element in a 
document 1s displayed first, then a linebreak, followed by 
the second element, then a linebreak, and so on, from the 
top of your file to the bottom. That’s flow. 


And here’s the HTML flowed 


Here's a little “abbreviated” HTML. onto a page. 


“ 


Each block element is 


<html> taken in the order it 
<head>. . .</head> appears in the markup, 
<body> and placed on the Page. 
<h1>...</h1> G 
<h2>...</h2> 
<p>...</p> 


<h2>...</h2> Each new block 
<p>. ..</p> element causes a 


<p>...</p> linebreak. 
<p>. ..</p> 
</body> 
</html> 
Notiee that elements 
take up the full width 
of the page. 


SS —_ 
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playing with flow 


Here’s your page. Flow 
the block elements in : BE the Browser 
lounge al ere ? i Open your “Jounge-htm]” file and locate 
‘pall the block elements. Flow each one on 
_ to the page to the left. Just concentrate 
on the block elements 
nested directly inside the 
body element. You can also 
ignore the “float” property 
in your CSS because you 
don’t know what it does yet. Check your 
answer hefore moving on. 


Here are all the block 
elements you'll need to 
complete the job. 
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layout and positioning 


What about inline elements? Here's another little 


So you know that block elements flow top to snippet of HTML. 
bottom, with a linebreak in between each element. Oo 
Easy enough. What about the inline elements? 


Inline elements are flowed next to each other, <p> 
horizontally, from top left to bottom right. Here’s 
how that works. 


Join us <em>any evening</em> for 
these and all our other wonderful 


<a href="beverages/elixir. 
html" title="Head First Lounge 


Elixirs">eclixirs</a>. 


If we take the inline oe 


tontent of this <p> element 
and flow it onto the page, 
we start at the top left: PN 


The inline elements are laid next to one 


p 
another horizontally, as long as there is car 
room on the right to plate them. \ 7 
S172 


Here, there’s room to fit all the inline 
elements horizontally. Notiee that text 
is a special case of an inline element. The 
So what if we make the browser window browser breaks it into inline elements that 
a little thinner, or we reduce the size of are the right size to fit the space. 
the content area with the width property? 
Then there’s less room to place the inline Lo™N 
elements in. Let's see how this works. 


Now the content has been flowed left to 
right until there’s no more room, and then 
the content is placed on the next line. Notice 


the browser had to break the text up a little 
differently to make it fit nicely. ae) 


And if we make the content area even thinner, 
look what happens. The browser uses as many lines 
as necessary to flow the content into the space. 


you are here > 475 


www.it-ebooks.info 


how flow works 


How it all works together 


Now that you know how block and inline elements are 


flowed, let’s put them together. We'll use a typical page Here, we've resized the browser 
with headings, paragraphs, and a few inline elements like window, squeezing all the content 
spans, some emphasis elements, and even images. And we into a smaller horizontal size- 


can’t forget inline text. 


We've starting with a browser 
window that’s been resized to 
a fairly wide width. 


Things flow the same way, although in 
some places, the inline elements take 
up more vertical lines to fit. 


Each block element is 
flowed top to bottom 

as you'd expect, with a 
linebreak in between each. 


D 


And the inline 
elements are 
flowed from the 
top left to the 
bottom right 

of the element's 


content area. 


If the inline content of each block Fits the 
width of the content area, then it’s placed 


there; otherwise, more vertical room is made for 


m k 
the content and it’s continued on the next line. ( Now the block elements take wp 


more vertical room because the inline 
tontent has to Lit into a smaller 
horizontal space. 
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layout and positioning 


One more thing you should know about flow and boxes 


Let’s zoom in just a bit and look at one more aspect of how the browser lays 
out block and inline elements. It turns out that the browser treats margins 
differently depending on which type of element 1s being placed on the page. 


When the browser is placing two inline 
elements next to each other... 


When the browser has the task of placing two inline elements side by side, and 
those elements have margins, then the browser does what you might expect. It 
creates enough space between the elements to account for both margins. So, 
if the left element has a margin of 10 pixels and the right has a margin of 20 
pixels, then there will be 30 pixels of space between the two elements. 

margin \ A margin 

Ty — Here we've got two images side by 
side, and images are displayed as inline 
elements by default. So, the browser 
uses both of their margins to caleulate 
the space that goes between them. 


When the browser is placing two block 
elements on top of each other... 


Here’s where things get more interesting. When the browser places two block 
elements on top of each other, it collapses their shared margins together. The height 
of the collapsed margin is the height of the largest margin. 


Their shared margin is 

the size of the larger 

of the two margins. 

Say the top element's 

bottom margin is 1O “ > 
pixels, and the bottom 
element's top margin 

is 2O pixels. Then the 
collapsed margin will be 

20 pixels. 


When the browser 
places two block 
elements on top 
of each other, it 
collapses their 
margins. 
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questioning 


thereyareno 
b Questions 


pum 


Q: So if | have a block element with a zero margin, and a 
block element below it with a top margin of 20, the margin 
between them would end up being 20? 


A: Right. If one of the margins is bigger, then the margin becomes 
the larger of the two, even if one margin is zero. But if the margins 
are the same, say, 10 pixels, then they just get collapsed together to 
10 pixels total. 


Q: Can inline elements really have margins? 


A: They sure can, although you'll find that you often don’t set the 
margins of inline elements. The one exception is images. It is very 
common to not only set margins but also borders and padding on 
images. And while we aren't going to be setting any inline element 
margins in this chapter, we will be setting the border on one a little 
later. 


Q: What if | have one element nested inside another and they 
both have margins? Can they collapse? 


A: Yes, that can happen. Here’s how to figure out when they will: 
whenever you have two vertical margins touching, they will collapse, 
even if one element is nested inside the other. Notice that if the outer 
element has a border, the margins will never touch, so they won't 
collapse. But if you remove the border, they will. This is sometimes 
puzzling when you first see it happen, so put it in the back of your 
mind for when it occurs. 


Q: So how exactly does text work as an inline element since 
its content is not an element? 


A: Even if text is content, the browser needs to flow it onto the 
page, right? So the browser figures out how much text fits on a given 
line, and then treats that line of text as if it were an inline element. 
The browser even creates a little box around it. As you've seen, if you 
resize the page, then all those blocks may change as the text is refit 
within the content area. 
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We've been through seven pages 

of “flow.” When are you going to 
explain that one little property we put 
into our CSS file? You know, the 


float: right: 


To understand float, you have to understand flow. 


It might be one little property, but the way it works is closely tied to 
how the browser flows elements and content onto the page. But hey, 
you know that now, so we can explain float. 


Here’s the short answer: the float property first takes an element 
and floats it as far left or right as it can (based on the value of float). 
It then flows all the content below it around the element. Of course 
there are a few more details, so let’s take a look... 
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layout and positioning 


How to float an element 


Let’s step through an example of how you get 
an element to float, and then we’ll look at what h1 


it does to the flow of the page when you do. ho 


p id=“amazing” 


First, give it an identity 5 


Let’s take one of these paragraphs and give 
it an id. We’d like to call it the “amazing 
floating paragraph,” but we’ll just call it 
“amazing” for short. 


: 


Now give it a width 


A requirement for any floating element is that it 
have a width. We’ll make this paragraph 200 pixels 
wide. Here’s the rule: 


p id=“amazing’” 


#amazing { 
width: 200px; 
} 


Now the paragraph is 200 pixels 
wide, and the inline content 
contained in it has adjusted to that 
width. Keep in mind, the paragraph 
is a block element, so no elements are 
going to move up beside it because all 
block elements have linebreaks before 
and after them. 
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Now float it 


Now let’s add the float property. The float 
property can be set to either left or right. Let’s 


stick with right: ae 
| p id=“amazing 
I 


#amazing { 
width: 200px; 
float: right; 

} 


Now that we’ve floated the “amazing” paragraph, 
let’s step through how the browser flows it and 
everything else on the page. 


(1) First, the browser flows the 
elements on the Page as usual, 
starting at the top of the file and 
moving, toward the bottom. 


(3) Betause the floated alia ht 
ee eteab atin | 
like the paragraph isn't even there. a | sce ee om 
ls 
(4) But when the inline elements p 


ave positioned, they respect the 
boundaries of the floated element. 
So they ave flowed around it. 


Ce ee 
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(2) When the browser encounters 
the floated element, it places it all 
the way to the right. It also removes 
the paragraph from the flow, like 
it’s floating on the page. 


Notice that the 

bloek elements are 

positioned under 

the floated element. 
) That’s because the 

floated element is no 

longer part of the 


normal flow. 


However, when the 
inline elements are 
flowed within the 
block elements, they 
Flow around the 
borders of the 
Floating element. 


layout and positioning 


Behind the scenes at the lounge 


Now you know all about flow and how floated elements Remember, in addition to setting the 
are placed on the page. Let’s look back at the lounge elixirs <div> to float right, we also 
and see how this all fits together. moved the elixirs <div> up just, below 


the logo at the top of the page. 


Moving the <div> allowed us to float it to the 
vight and then have the entire page flow around 
it. [£ we had left the elixirs <div> below the music 
recommendations, then the elixirs would have been 


floated right after most of the page had been placed. 


Yisitige 


7 Wieicones fo cho head Firat Lounge 


‘Tiesat Ete Pear betcha oo dn na eS Hida rere RS 
ee ee ek 
OR i, ee a ge ae oe it a te le 
fun comers sherry a cerca, bed scm eed comes ems phew ieee 
san SS 


Pay ee ie et ben dae ye iy eee ee 
(aE Bei VERE eee ig ep eg 
er 


All these elements follow the So niin ran Sires rt ere, 
elixirs in the HTML, so they ES J 


are flowed around it. 


+ 


Remember that the elixirs <div> is floating 


Bad ial a re al ag, ft om oo en eke oe ee eed 


on top of the page. All the other elements inmate ielon ef crarem ara durdibeme ea can 
are underneath it, but the inline content parecer enitonph bir hance urtagiaa 
vespects the elixirs’ boundaries when they Saat ibind beat Linc ant beed igcpea acon hao 
are Flowing into the page. abet mbar pa Tadeneeion Raia PRs 


So a PA RT TA A ah 
Fe el eae Aare Deeb ig on they Beat eg, al oo heen wet vai fer 
THK ere Wie Poy Ue po HE Oe eta 


Ue rey ene bre eee Ca 
‘Wihest ‘a playing art the Lamang So 
Also notice that the text wraps Wtre beaercitp nied peed (ec eee ee oe be eee aed oe 
around the bottom of the elixirs, ree ere ea 
because the text is contained in a 4 areca, cme 
blotk element that is the width of Bibatot ocrealgrarclf SP etal 


0 Bote her Aer, ire Be 


the page. [f yours doesn't wrap, try 
narrowing, Your browser window until 


the text wraps underneath the elixirs. 


4 A i. eet Foe 
A Rar ged Beat RAS RE a a I pty a he HE 
a 
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a new assignment: starbuzz 


d Move the elixirs <div> back to its original place below the main content, then save 
Exercise and reload the page. Where does the element float now? Check your answer in the 
: back and then put your elixirs <div> back underneath the header. 


Nice stuff. Do you think I'm going to 
watch these fantastic lounge designs 
and not want you to improve Starbuzz? 
You've got a blank check...take 
Starbuzz to the next level. 


It looks like we’ve got a new assignment. Starbuzz 
really could use some improvement. Sure, you’ve 
done a great job of creating the typical top-to- 
bottom page, but now that you know flow, you 
should be able to give Starbuzz Coffee a slick new 
look that is more user-friendly than the last design. 


We do have a little secret though...we’ve been 
working on this one a bit already. We’ve created 
an updated version of the site. Your job is going 
to be to provide all the layout. Don’t worry, we'll 
bring you up to speed on everything we’ve done so 
far—_t’s nothing you haven’t seen before. 
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The new Starbuzz 


Let’s take a quick look at what we’ve got so 
far, starting with the page as it looks now. 
Then we’ll take a peek at the markup and 
the CSS that’s styling it. 


We've got a header now with a new spiffy Starbuzz. logo and the 
Company mission statement. This is actually just a 4lF image. 


We've got four sections: the header, 

a main tontent section, a settion as 
advertising something new called the NS 
“Bean Machine,” and a footer. * 


ea Poa a 


be styled independently. x > See rer eee id area ee iar a tae 


ame ian roca oe i a wd PROM. 


Each section is a <div> that can Carman fot ah thet dena ene npahrom nd teed tegen mi or 


It looks like we've got one : — <= —E 
background tolor for the 
page as a whole, and then 
each <div> is using an image 
asa background. 


gE LEE eee Der Pa PL 
rei 


Here’s the “Bean Machine” area. This links to 

a new area of Starbuzz Coffee where you Can acuna hea 
order your coffee beans online. This link doesn’t —™y mncaner scl: ese Rs: ted-+ i aan s\ ‘eared Deru inchs Bey-sevel 
work just yet because you're Going, to build the eh ean Rb pk rer ner Na ETRE 
Bean Machine in an upcoming chapter. 


Notice that we've styled the 
links in an interesting way, 


use a background image, just a with dotted underlines... 
background tolor. 


Here’s the footer. [t doesn’t 
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looking over the 


A. look at the markup 


Now let’s take a look at the new Starbuzz markup. We’ve taken each of the logical sections and 
placed it into a <div>, each with its own id. Beyond the <div>s and <span>s, there’s really 
nothing here that you hadn’t already seen by about Chapter 5. So, take a quick look and get 
familiar with the structure, and then turn the page to check out the CSS style. 


Here’s all the usual 


<!DOCTYPE htm1> &— HTML administravia... 

peers followed by a <div> for 
<meta charset="utf-8"> the header and a <div> 
<title>Starbuzz Coffee</title> for the main content area. 
<link type="text/css" rel="stylesheet" href="starbuzz.css"> 

</head> 

<body> 


<div id="header"> 
<img src="images/header.gif" alt="Starbuzz Coffee header image"> 
</div> 


<div id="main"> 
<h1>QUALITY COFFEE, QUALITY CAFFEINE</h1> 
<p> 
At Starbuzz Coffee, we are dedicated to filling all your caffeine needs through our 
quality coffees and teas. Sure, we want you to have a great cup of coffee and a great 
coffee experience as well, but we're the only company that actively monitors and 
optimizes caffeine levels. So stop by and fill your cup, or order online with our new Bean 
Machine online order form, and get that quality Starbuzz coffee that you know will meet 
your caffeine standards. 
</p> 
<p> 
And, did we mention <em>caffeine</em>? We've just started funding the guys doing all 
the wonderful research at the <a href="http://buzz.wickedlysmart.com" 
title="Read all about caffeine on the Buzz">Caffeine Buzz</a>. 
Mf you want the Natest on coffee and other caffeine products, 
stop by and pay them a visit. 
</p> 
<h1>0UR STORY</h1> 
<p> 
"A man, a plan, a coffee bean". Okay, that doesn't make a palindrome, but it resulted 
in a damn good cup of coffee. Starbuzz's CEO is that man, and you already know his 
plan: a Starbuzz on every corner. 
</p> 
<p> 
In only a few years he's executed that plan and today 
you can enjoy Starbuzz just about anywhere. And, of course, the big news this year 
is that Starbuzz teamed up with Head First readers to create Starbuzz's Web presence, 
which is growing rapidly and helping to meet the caffeine needs of a whole new set of 
customers. 
</p> 
<h1>STARBUZZ COFFEE BEVERAGES</h1> 
<p> 
We've got a variety of caffeinated beverages to choose 
from at Starbuzz, including our 
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This is more of the main content 
area Continued over here. 


<a href="beverages .html#house" title="House Blend">House Blend</a>, 
<a href="beverages .html#mocha" title="Mocha Cafe Latte">Mocha Cafe Latte</a>, 
<a href="beverages .html#cappuccino" title="Cappuccino">Cappuccino</a>, 
and a favorite of our customers, 
<a href="beverages .html#chai" title="Chai Tea">Chai Tea</a>. 

</p> 

<p> 
We also offer a variety of coffee beans, whole or ground, for you to 
take home with you. Order your coffee today using our online 
<a href="form.html" title="The Bean Machine">Bean Machine</a>, 
and take the Starbuzz Coffee experience home. 

</p> 


</div> 


<div id="sidebar"> 
<p class="beanheading"> 
<img src="images/bag.gif" alt="Bean Machine bag"> 
<br> 
ORDER ONLINE 


with the Here's the <div> for the Bean Machine. 
; 5 » 
<a href="form.html">BEAN MACHINE</a> We've given it an id of “sidebar”. Hmm, 


cee wonder what that Could mean? 
<span class="slogan"> 


FAST <br> 
FRESH <br> 
TO YOUR DOOR <br> 
</span> 
</p> 
<p> 


Why wait? You can order all our fine coffees right from the Internet with our new, 


automated Bean Machine. How does it work? Just click on the Bean Machine link, 
enter your order, and behind the scenes, your coffee is roasted, ground 
(if you want), packaged, and shipped to your door. 
</p> 
</div> 


<div id="footer"> 
é&copy; 2012, Starbuzz Coffee 
<br> 
All trademarks and registered trademarks appearing on 
this site are the property of their respective owners. 
</div> 


bod: ; 
peel And Finally, we have the <div> that 


makes up the footer of the page: 
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beginning starbuzz style 


And a look at the style 


Let’s get a good look at the CSS that styles the new Starbuzz page. Step through 
the CSS rules carefully. While the new Starbuzz page may look a little advanced, 
you'll see it’s all just sumple CSS that you already know. 
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body { ae. First, we just set up 
background-color: #b5a789; some basi¢s in the body: 
ee a "Times New Roman", Times, serif; a background tolor and 
baie rails fonts, and we also set the 
margin: Opx; 
} margin of the body to O. 
This makes sure there's no 
#theader { extra room around the 
background-color: #675c47; f 4h 
margin: 10px; edges 2 € page. 
height: 108px; 
} 
#main { 
background: #efe5d0 url(images/background.gif) top left; 
font-size: 105%; 
padding: 15px ; 
margin: Opx 10px 10px 10px; Se Next, we have a rule for 
} each logical section. |n 
Le each, we're tweaking the 
Spideher font size, adding padding, 
background: #efe5d0 url(images/background.gif) bottom right; . ‘ 
font-size: 1053; and margins and also—in 
padding: 15px ; the case of main and 
margin: Opx 10px 10px 10px; the sidebar—specif ying a 
} background image. 
#footer { 
background-color: #675c47; 
color: #efe5d0; 
text-align: center; Next, we set up the fonts and 
padding: 15px ; : 
margin: 10px; colors on the headings. 
font-size: 903; 
} 
hl { 
font-size: 1203; And then some éolors on the Class 
color: #954b4b; called slogan, whith is used in the 
} sidebar <div>, and likewise with 
i hich is 
.-Slogan { color: #954b4b; } the beanheading class, me, 
used there as well. 
.beanheading { 
text-align: center; 
line-height: 1.8em; 


a:link { 
color: 


text-decoration: 


border-bottom: 
} 
a:visited { 

color: 


text-decoration: 


border-bottom: 


yo 


#b76666; 
none; 
thin dotted #b76666; 


#675c47; 
none; 
thin dotted #675c47; 


We've setting the border—bot-tom 
only for this <a> element. 


layout and positioning 


For the last two rules in the Starbuzz CSS, we use the 
ailink and a:visited pseudo—classes to style the links. 


We've removing the default underline that links get by 
setting text-decoration to none. Instead... 


we're getting a nice dotted underline 
effeet on the links by using a dotted 
bottom border instead of an underline. 
This is a great example of using the border 
property on an inline element. 


Let’s take Starbuzz to the next level 


Here’s the goal: to turn Starbuzz Coffee into the site on 
the right. To do that, we need to move the Bean Machine 
sidebar over to the right so we’ve got a nice two-column 
page. Well, you’ve done this once already with the lounge, 
right? So, based on that, here’s what you need to do: 


e Give the element you’re going to float a unique 
name using an id. That’s already done. 


2] Make sure the element’s HTML is just below 
the element you want it to float under—in this 


case, the Starbuzz header. 


5] Set a width on the element. 


4] Float the element to the left or the right. It looks 
like you want to float it right. 


Let’s get started. In a few simple steps, we should have the 
Starbuzz CEO sending a few Chai Teas over on the house. 


We've got a nice two—Column look 
here, with diserete Columns. 
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moving the sidebar 


Move the sidebar just below 
the header 


It’s a fact of life that when you float an element, you 
need to move the HTML for the element directly below 
the element that you want it to follow. In this case, the 
sidebar needs to come under the header. So, go ahead SEL ee 
and locate the sidebar <div> in your editor and move —_ 
the entire <div> to just below the header <div>. te 
You'll find the HTML in the file “index.html” in the 
“chapter11/starbuzz” folder. After you’ve done that and rOLLTTe SoBe, LUTTE 
saved, reload the page. Ae ppp ee 
Now the sidebar should be on pepelareeuvirorctareperspomarverstire aaa allemaal 
top of the main content area. ssc ee 


a a a 
ia ee ete tke eee at 


Sits eet ew et at eeetseee ces eee eee 
SS rant eee r 


Set the width of the sidebar 
and float it 


Let’s set the width of the sidebar to 280 pixels. And to float the 
sidebar, add a float property to “chapter11/starbuzz.css”, like this: 


We're using an id selector to select the 
element with the id “sidebar”, which we 
know is the <div> for the sidebar. 


d 


#sidebar { 
background: #efe5d0 url(images/background.gif) bottom right; 
font-size: 105%; 
padding: 15px; 
margin: Opx 10px 10px 10px; 
eee seer, STN Wire setting the width of the 
Sere eer tontent area to 280 pixels. 


Re find then we're Floating the sidebar to the right. Remember, this moves 
the sidebar as far right as possible below the header, and it also removes 
the sidebar from the normal flow. Everything else below the sidebar in the 
HTML is oing, to move up and wrap around it. 
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#7 


~ 


; 


layout and positioning 


T have an idea. In the future, why 
don't we float the main content to the 
left, rather than the sidebar to the right? 
Since the main content is already at the 
top, we wouldn't have to move things 
around, and we get the same effect. 


That’s actually a great idea, but 
there are a couple of issues. 


On paper, this looks like a great idea. What 
we do is set a width on the main content 
<div> and float it to the left, and then let 
the rest of the page flow around it. That 
way, we get to keep the ordering of the 
page and we also get two columns. 


The only problem is, this doesn’t result in a 
very nice page. Here’s why: remember, you 
have to set a width on the element that you 
are going to float, and if you set a width 
on the content area, then its width is going 
to remain fixed while the rest of the page 
resizes along with the width of the browser. 
Typically, sidebars are designed to be 
narrower than the main content area, and 
often look terrible when they expand. So, 
in most designs, you want the main content 
area to expand, not the sidebar. 


But we are going to look at a way to use 
this idea that works great. So hang on to 
this idea. We’ll also talk a little more about 
why you'd even care what order your 
sections are in. 
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testing the float 


Test driving Starbuzz @as 


Make sure you add the new sidebar properties to the 
“starbuzz.css” file in the “chapter]1/starbuzz” folder, and 
then reload the Starbuzz page. Let’s see what we’ve got... 


Hmm, this looks pretty good, but if You flip back three 
pages, you'll see we're not quite where we want, to be. 


HeselislPe ificherertyjauemaeeiedee het cade 


jn 


The main content and the Oi rhuzre 
sidebar ave on the left poo ; 
and the right, but they 
don't really look like two 


columns yet. QUALITY OOFPER, QUALITY CAFFEINE 


nly cceeapany Unat aceeely 
levels. Bo stop 
eect retin teeter ns 
Lock at how the a : 


‘Asal, did vem cramnicica infFatea? Weve fat ateartned beige sing ali 
background images Sevres — ae ae iene ‘ericufios and 
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And the text wraps around and under the sidebar, which doesn't make this 
look like two columns either. Hmm, that is actually how the lounge worked 
too—maybe we should have expected that. 
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Fixing the two-column problem 


At this point, you might be realizing that page layout is a bit of an art—we’ve 
got a set of techniques for laying out block elements, but none of them is 
perfect. So, what we’re going to do is solve our problem using a common 
technique that is widely used. It’s not perfect, as you’ll see, but in most cases 
it gives you good results. And after this, you’re going to see a few other ways 
to approach the same two-column problem, each with its own advantages. 
What’s important here 1s that you understand the techniques and why they 
work, so you can apply them to your own problems and even adapt them 
where necessary. 


> QUALITY COFFEE, QUALITY CAFFEINE 


layout and positioning 


The first thing to 
remember is that the 
sidebar is floating on 
the page. The main 
tontent area extends 
all the way under it. 


Prorhume Coffee, ssenats Gaiiemtatto Gilling cyaer ealicins needs thromgh 


So, what if we give the main mh pom 4 — Sf apes norway nga ly 
content area a right margin en a nr et een ee mp irae 
that is at least as big as the caine that yore ivy wll exit woeur cafes 

sidebar? Then its content will : a a gray Sesaabane i i aE re 
extend almost to the sidebar, satis produ by abl ey Goon o aah 


but not all the way: OUR STORY 


‘Agus, ¢ plan, a coffee beard”, Dhes, thet docest cathe « palexdrorec, 
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Then we'll have separation between toler de ae pm wy oof peregtemerengret pe aie nines eS 

the two, and since margins are ar SeaOCa Latte eA —, 
transparent and don’t show the 2 he bab eg og ee niente Far Coli ) Way using oer 


background image, the background 
color of the page itself should show 
through. And that’s what we've 
looking for (flip back a few Pages 
and you'll see). 
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Let's make the margin as 
wide as the sidebar. 
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using margins 


your pencil 
os 

What we want to do is set a right margin on the main content section so that it's the 
same width as the sidebar. But how big is the sidebar? Well, we hope you aren't already 


rusty since the previous chapter. Here’s all the information you need to compute the 
width of the sidebar. Check your answer in the back of the chapter. 


#sidebar { 
background: #efe5d0 url (images/background.gif) bottom right; 


font-size: 105%; 


padding: 15px; 
margin: Opx 10px 10px 10px; 
width: 280px; 
float: right; 
You'll find everything you 
ea need to Compute the width 


of the sidebar in this rule. 


Setting the margin on the main section 


The width of the sidebar is 330 pixels, and that includes 10 pixels of left margin on 
the sidebar, which will provide the separation we need between the two columns 
(what the publishing world calls a “gutter”). Add the 330-pixel right margin to the 
#main rule in your “starbuzz.css” file, like we’ve done below: 


#main { 
background: #efe5d0 url (images/background.gif) top left; 
font-size: 105%; 
padding: 15px; 
margin: Opx 330px 10px 10px; 
‘ 
We've changing the right margin to 330 pixels 
to match the size of the sidebar. 


492 


www.it-ebooks.info 


Test drive == 


As usual, save your “starbuzz.css” file and then 
reload “index.html”. You should now see a 
nice gutter between the two columns. Let’s 
think through how this is working one more 
time. The sidebar is floating right, so it’s been 
moved as far to the right as possible, and the 
whole <div> has been removed from the 
normal flow and is floating on top of the page. 
Now the main content <div> is still taking 

up the width of the browser (because that’s 
what block elements do), but we’ve given it a 


layout and positioning 


News sted sar mee enced ee Be oe eee at 
jie pall amok sin total ia - 
and erfermetrin: cose, 


oe ener 


Peet teense eat - 


eed 


margin as wide as the sidebar to reduce the : 
Se ee i Seen 


width of the content area. The result is a nice * shed ara res 
two-column look. You know the box of the tote ee may weedeat = Pardee. 
main <div> still goes under the sidebar, but TE 
we won’t tell anyone if you don’t. Sr attiren Gols roas es frp oes ols se aa 
sud ibe tee Ben bes eee bere 
By expanding the margin 
ox the main <div>, we're 
creating the illusion ofa 


two-Column layout, connie 7? 


with a gutter in between. 


— mn = Uh oh, we have 
: another problem 


As you were test driving the 


Reena ma Sede ag eat gs py page, you might have noticed 
a seapete prac apse rp eeigun paler elo rmdir ante ad a little problem. If you 
i rare Germ, one pepe cea rg ee rear eae 


i ae : = resize the browser to a wide 
Pe rie cee ie bes he erie eek ealpeee nae 


position, the footer comes up 
DUE Gre . 
underneath the sidebar. Why? 


Ne Ne Ee a ee ae 
Stes Mee Va ' ci ruuTeY Well, remember, the sidebar is 


" a ee ee eee De Rate See oe ee 5 
iene grec en eedel gecko rset fmm egy i ~_ not in the flow, so the footer 


STAR DAI? COBTID EVER ADE pretty much ignores it, and 
ep a hi Serer when the content area is too 
eR ta a eee | . short, the footer moves right up. 
We could use the same margin 
trick on the footer, but then the 
footer would only be under the 
content area, not the whole 
We've got 2 problem. When you resize your browser to a page. Geez. So, what now? 

wide position, the footer and the sidebar start to overlap. 
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a margin alternative 


Wait a sec. Before you get way into 
solving that problem, I have to ask, why 
did we have to go to all this trouble of 
using a margin? Why don't we just set 
the width of the main area? Wouldn't 
that do the same thing? 


That sounds good...until you try it. 


The problem with setting a width on both the 
content area and the sidebar is that this doesn’t 
allow the page to expand and contract correctly 
because both have fixed widths. Check the screen- 
shots below that show how it works (or rather, 
doesn’t work). 


But this is good. You’re thinking in the right ways, 
and a little later in the chapter we’re going to come 
back to this idea when we talk about “liquid versus 
frozen” layouts. There are ways to make your idea 
work if we lock a few other things down first. 


And when the browser window is made 


( small, the two start to overlap. 


Sa 


= 


When the browser is wide, the Bi 
two totally separate. 
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layout and positioning 


Solving the overlap problem 


To fix our overlapping problem, we’re going to use 


another CSS property that you haven’t seen yet: the ae Te 
clear property, and here’s how it works... 
Here’s what we've got now. The 
“main” <div> is short enough div id=“main’” 


that the footer <div> is Coming 
right up and overlapping with 


the sidebar <div>. 
7 div id=“footer” 


a -- 
3 


div id=“sidebar’ 


This happens because the sidebar has been pulled out of the flow. 
So, the browser just lays out the main and footer <div>s like it 
normally would, ignoring the sidebar (although remember that when 
the browser flows inline elements, it will respect the borders of 
the sidebar and wrap inline elements around it). 


You can use the CSS clear property on an element to request that as the element is 
being flowed onto the page, no floating content is allowed on the left, right, or both 
sides of the element. Let’s give it a try... 


#footer { 
background-color: #675c47; 
color: #efe5d0; Here we're adding a property to 
text-align: center; the footer rule, which says that 
padding: 15px; no floating content is allowed on 
margin: 10px; the vight of the footer. 
font-size: 90%; 
clear: right; 

} 


Now when the browser places the 


| div id=“header” ; 


— ere er Kee —-s 
3 


div id=“sidebar’ 


elements on the page, it looks to see if 


there is a floating element to the right 
side of the footer, and if there is, it 
moves the footer down until there is 


div id=“main” 


Don't even 
think about putting 
a floating element to 
the right of me. 


| 
nothing on its right. Now, no matter | 
how wide you open the browser, the 
footer will always be below the sidebar. 


O 
a ETOsER 
Now the footer is placed below divide eele’ 


the sidebar so that there are no 
Floating elements to its right. ——7 
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more about columns and floats 


Test drive ea 


Go ahead and add the clear property to 
your “starbuzz.css” file in the footer rule, 
and then reload “index.html”. You'll see that 
when the screen is wide, the footer now stays 
below the sidebar. Not bad! 


Now, at this point the page is looking pretty 
good, but there are still a few improvements 
we can make. For instance, we’d like each 
column to come down to meet the footer 

so they are even—notice, as it is now, there 
is a gap either between the main content 
and the footer (if the browser window is set 
wide), or the sidebar and the footer (if the 
browser is set to a normal width). But fixing 
this isn’t that easy using float, so instead, 
we're going to move on and look at a few 
more ways to lay out these pages using other 
CSS techniques. As you’re going to see, 
there are many ways to do things in CSS, 
and each method has its own strengths and 
weaknesses. 


What’s important to you is that you 
understand the techniques so that you can 
apply them when and where you need to. 
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Now our footer problems are solved. The 
footer will always be below the sidebar, no 


matter how narrow or wide the browser. 


are no 3 
b Questions 


But this raises a good point, and identifies a 


Q: Can | float to the center? 


* No, CSS only allows you to float an 
element to the left or right. But if you think 
about it, if you were to float to the center, 
then the inline content under the floated 
element would have to be flowed around both 
sides of your element, which would be quite 
tricky to get to work in a browser. But one of 
the new layout solutions that will be coming 
in future versions of CSS may provide a way 
to do it—we'll have to wait and see. 
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Q: Do margins collapse on floated 
elements? 


A: No, they don't, and it’s pretty easy 

to see why. Unlike block elements that 

are flowed on the page, floated elements 
are just, well, floating. In other words, the 
margins of floated elements aren’t actually 
touching the margins of the elements in the 
normal flow, so they can’t be collapsed. 
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common error in layouts. If you have a main 
content area and a sidebar, it is common to 
set a top margin on each. Then, if you float 
the sidebar, it still has a margin, and that 
margin won't be collapsed with whatever is 
above it anymore. So you can easily end up 
having different margins on the sidebar and 
on the main content if you don’t remember 
that floated elements don’t collapse margins. 


Q: Can | float an inline element? 


A: Yes, you sure can. The best example —and a common 
one—s to float images. Give it a try—float an image left or right in a 
paragraph and you'll see your text flow around it. Don’t forget to add 
padding to give the image a little room, and possibly a border. You 
can also float any other inline element you like, but it's not commonly 
done. 


layout and positioning 


Q: Is it correct to think about floated elements as elements 
that are ignored by block elements, while inline elements know 
they are there? 


A: Yes, that’s a good way of thinking about it. Inline content 
nested inside a block element always flows around a floated element, 
observing the boundaries of the floated element, while block elements 
are flowed onto the page as normal. The exception is when you set 
the clear property on a block element, which causes a block element 
to move down until there are no floating elements next to it on the 
right, left, or both sides, depending on the value of clear. 


The only thing I 
don't like about this design is 
that when I view the web page on 
my smartphone, it puts the sidebar 
content above the main content, so I 
have to scroll through it. 


Right. That happens because of the 
way we ordered the <div>s. 


This 1s one of the disadvantages of the way we’ve 
designed this page—because we need the sidebar to 

be located just under the header and before the main 
content, anyone using a browser with limited capabilities 
(PDAs, small mobile devices, screen readers, and so 

on) will see the page in the order it is written, with the 


sidebar first. However, most people would rather see your 


main content before any kind of sidebar or navigation. 


- content. 


So, let’s look at another way of doing this, which goes 
back to your idea of using float “left” on the main 
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the no css test 


Look Ma, No CSS! 


Want to know how your pages are going to look to your users under 
bad conditions (like on a browser that doesn’t support CSS)? Then 
open your “index.html” file and remove the <link> from the <head>, 
save, and reload the page in your browser. Now you can see the 
real order things will be seen in (or heard from a screen reader). Go 
ahead and give it a try. Just make sure you put it back when you're 
done (after all, this is a chapter on CSS). 


Here's the Starbuez page without 
CSS. For the most part, we've in 
good shape. [+ is still very readable, 
although the Bean Machine does 
tome before the main content, 


which Probably isn't what we want. So Hone en aa nh a a, ed a ne 


2 eg LP cme ene va ae ay 
OUR SPOR 

A mn, an i bP oo ea 
ee ee ee 


Righty tighty, lefty loosey 


Let’s get the Starbuzz page switched over so that the main content is floating left. 
You're going to see that the mnemonic righty tighty, lefty loosey holds true in the 
CSS world too...well, for our sidebar, anyway. Here’s how we convert the page 
over...just a few simple steps. 
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layout and positioning 


Step one: Start with the sidebar 


We’re basically swapping the roles of the sidebar and the main content area. The 
content area is going to have a fixed width and float, while the sidebar is going to wrap 
around the content. We’re also going to use the same margin technique to keep the two 
visually separate. But before we start changing CSS, go to your “index.htm!” file and 
move the “sidebar” <div> down below the “main” <div>. After you’ve done that, here 
are the changes you need to make to the sidebar CSS rule: 


#sidebar { 
background: #efe5d0 url(images/background.gif) bottom right; 
font-size: 1053; Because the sidebar is now going to flow 
padding: 15px; a under the main content, we need to move the 
margin: Opx 10px 10px 470px; large margin to the sidebar. The total width 
width+—\260px- of the main content area is 470 pixels. (Go 
froat-——_trght; ahead and Compute that yourself in all that 
} : free time you have. Compute it in the same 
We've setting a fixed width on the main way as You did for the sidebar. You should 
content <div>, so delete the sidebar width know that we're going to set the width of 
property along with the float. the main content area to 420 pixels.) 
Step two: Take care of the main content 
Now we need to float the main <div>. Here’s how to do it: 
#main { 
background: #efe5d0 url (images/background.gif) top left; 
font-size: 105%; We've changing the right margin from 
padding: 15px; 330 pixels back to IO pixels. 
margin: Opx 10px 10px 10px; 
width: A20px; al We need to set an explicit width because we're going to 
float: left; float this element. Let's use +20 pixels. 
} i. We're going to float the main <div> to the left. 


Step three: Take care of the footer 


Now we just need to adjust the footer to clear everything to the left, rather than the right. 


#footer { 
background-color: #675c47; 
color: #efe5d0; 
text-align: center; Change the clear property to have 
padding: 15px; a value of left, rather than vight. 
margin: 10px; That way, the footer will stay clear 
font-size: 90%; of the main content area. 
clear: left; 

} 
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contemplating a better solution 


A quick test drive #=a= 


We've already said there might be a few 
problems with this method of floating 
the content to the left. Do a quick test 
drive before you move on just to see how 
this is all working. Go ahead and make 
the changes to your “starbuzz.css” file 
and then reload “index.html” in your 
browser. Get a good feel for how the page 
performs when it is resized to narrow, 
normal, and wide. 


7 


Actually, this looks pretty good, and we 
have the <div>s in the right order now. But 
it’s not great that the sidebar expands; 

it looks a lot better fixed. Sidebars are 
often used for navigation, and they don't 
look very good when expanded. 


When we float the sidebar <div> right, 
then the design stays nice and tight, 
allowing the content to expand, but if we 
float the main content to the left, the 
design feels too loose, allowing the sidebar 
to expand. 


ig BRAIN 
POWER 


Design-wise, the first design worked better, while information-wise, the 
second works better (because of the placement of the <div>s). Is there 
a way we can have the best of both worlds: have the sidebar at a fixed 
width, but the main <div> still first in the HTML? What design tradeoffs 


could we make to get there? 
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layout and positioning 


Liquid and frozen designs 


All the designs we’ve been playing with so far are called liquid layouts 
because they expand to fill whatever width we resize the browser to. 
These layouts are useful because, by expanding, they fill the space 
available and allow users to make good use of their screen space. 
Sometimes, however, it is more important to have your layout locked 
down so that when a user resizes the screen, your design still looks as it 
should. These are called frozen layouts. Frozen layouts lock the elements 
down, frozen to the page, so they can’t move at all, and so we avoid a lot 
of issues that are caused by the window expanding. Let’s give a frozen 
layout a try. 


Going from your current page to a frozen page only requires one addition to 
your HTML, and one new rule in your CSS. 


HTML changes 


In your HTML you're going to add a new <div> element with the id 
“allcontent”. Like its name suggests, this <div> is going to go around all the 
content in your page. So place the opening <div> tag before the header 
<div> and the closing tag below the footer <div>. 


<body> ye Add a new <div> with the id of “alleontent” 
div Gd="alleontent"S) around all the other elements in the <body>. 
<div id="header"> 
...rest of the HTML goes here... 


</div> . 
</div> ae This <div> closes the footer <div>. 
</body> 


CSS changes 


Now we’re going to use this <div> to constrain the size of all the elements 
and content in the “allcontent” <div> to a fixed width of 800 pixels. 


Here’s the CSS rule to do that: the width of “slleontent” to 


aa baie i will have the effect : constraining, 
SaG ea everything in it to Lit within BOO preels- 
width: 800px; 
padding-top: 5px; While we're at it, since this is the first time 
padding-bottom: 5px; we've styling this <div>, let's add some padding 
background-color: #675¢c47;} and give it its own background color. You'll see 
} this helps to tie the whole page together. 


The outer “alleontent” <div> is always 800 pixels, even when the browser is resized, so we've 


effectively frozen the <div> to the page, along with everything inside it. 
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frozen layouts 


A frozen test drive #3 


Go ahead and add this rule to the bottom of 
“starbuzz.css”, and then reload “index.html”. Now 
you can see why we call it a frozen layout. It doesn’t 
move when the browser is resized. 


Now the “alleontent” <div> is 800 pixels in width, no matter 
how you resize the browser. And, because all the other <div>s 
ave inside “alleontent”, they will Fit into the BOO-pixel 
space as well. So, the page is basically frozen to 800 pixels. 


This certainly solves the problem of the sidebar 


expanding, and it looks pretty nice. It is a little 


ee ne 


strange when the browser is very wide, Though So 
because of all the empty space on the right side. sugars" 


fies a 
P49 
ee rT 


But we're not done yet we've got a 


little room for improvement. 


What's the state between liquid 
and frozen? Jello, of course! 


The frozen layout has some benefits, but it also just plain 
looks bad when you widen the browser. But we’ve got a fix, 
and it’s a common design you'll see on the Web. This design is 


& between frozen and liquid, and it has a name to match: Jello. 


; & Jello layouts lock down the width of the content area in 
( =e the page, but center it in the browser. It’s actually easier to 
' 7 change the layout to a jello layout and let you play with it 
—_—_— than to explain how it behaves, so let’s just do it: 


Ss 


a Rather than having Fixed left and right 


#allcontent { margins on the “alleontent” <div>, we've 
width: 800px; setting the margins to “auto”. 
padding-top: 5px; 
padding-bottom: 5px; 
background-color: #675c47; 
margin-left: auto; 
margin-right: auto; 


KR If you remember, when we talked about giving a content area a width of “auto”, the 
browser expanded the content area as much as it needed to. With “auto” margins, 
the browser Figures out what the correct margins are, but also makes sure the left 
and right margins ave the same, so that the content is centered. 
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layout and positioning 


Test driving with a tank of jello 


Add the two margin properties to your “starbuzz.css” file, and then reload 
the page. Now play with the size of the browser. Pretty nice, huh? 


N arrow 


Wide 


So if we want our content in the 
correct order, we either have to live 
with an expanding sidebar or we have 
to use a jello layout? Is there any 
other way to do this? 


With CSS, there are typically lots of ways to approach a layout, each with its 
own strengths and weaknesses. Actually, we’re just about to look at another 
common technique for creating a two-column layout that keeps the content in 
the correct order, and avoids some of the problems of the liquid layouts. But as 
you'll see, there are some tradeoffs. 


With this new technique, we’re not going to float elements at all. Instead, we’re 
going to use a feature of CSS that allows you to precisely position elements on 
the page. It’s called absolute positioning. You can also use absolute positioning 
for some nice effects beyond just multicolumn layouts, and we’ll look at an 
example of that, too. 


To do all this, we’re going to step back to the original HTML and CSS we 
started with in the beginning of this chapter. You can find a fresh copy of these 
files in the “chapter11/absolute” folder. Be sure and take another look at these 
files so you remember what they originally looked like. Recall that we’ve got 

a bunch of <div>s: one for the header, one for main, one for the footer, and 
also a sidebar. Also remember that in the original HTML, the sidebar <div> is 
below the main content area, where we’d optimally like to have it. 
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using absolute positioning 


How absolute positioning works 


Let’s start by getting an idea of what absolute 


positioning does, and how it works. Here’s a little The first thing we do is use the 
CSS to position the sidebar <div> with absolute position property to specify that the 
positioning. Don’t type this in just yet; right now we element will be positioned absolutely. 
just want you to get a feel for how this works: 

#sidebar { ? 


position: absolute; 
top: 100px; ~ _ Next we set top and 
What the CSS does right: 200px; = — right properties. 


Now let’s look at what this CSS does. When an iat 

element is absolutely positioned, the first thing the A And we also give 
browser does is remove it completely from the flow. the <div> a width. 
The browser then places the element in the position 
indicated by the top and right properties (you can 
use bottom and left as well). In this case, the sidebar 
is going to be 100 pixels from the top of the page, and 
200 pixels from the right side of the page. We’re also 
setting a width on the <div>, just like we did when it 
was floated. 


The sidebar is 
positioned 200 
pixels from the 
vight of the page. 


Because sidebar is now S 2 find the sidebar 


cance toon the flow ) | aw header s positioned 100 
pixels from the 
top of the page. 


and positioned according 
to any top, left, right, 
or bottom properties 
that are specified. 


Because the sidebar is out of vA 


the flow, the other elements — y, 
don’t even know it is there, 


and they ignore it totally. 


div id=“sidebar’” 


| div id=“main” 


div id=“footer” 


Elements that are in the flow don’t even wrap their 
inline Content around an absolutely positioned element. 
They are totally oblivious to it being on the Page. 
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layout and positioning 


Another example of absolute positioning 


Let’s look at another example. Say we have another <div> Now we have a second <div>, positioned 


absolutely, 100 pixels from the lef+ 


with the id “annoyingad”. We could position it like this: 
ee P and 150 pixels from the top. 


#annoyingad { 
position: absolute; 
top: 150px; 


left: 100px; 

width: 400px; ‘) 
The annoying ad is being positioned |OO 
pixels from the left, and 150 pixels 


from the top. It’s also a bit wider than 
the sidebar, at 400 pixels. 


CY 
div id=“header’” = 


div 


div id=“footer” 


Just like with the sidebar, we’ve placed the “annoying 


ad” <div> at a precise position on the page. Any 
elements underneath that are in the normal flow 
of the page don’t have a clue about the absolutely 


positioned elements layered overhead. This is a little 
different from floating an element, because elements Notice the annoyingad <div> is 
that were in the flow adjusted their inline content on top of the sidebar <div>. 
to respect the boundaries of the floated element. 

But absolutely positioned elements have no effect 


whatsoever on the other elements. The sacar aed annoyingad <div>s 


are layered on the page, with the 


Who’s on top? annoyingad having a greater z-index 


: ; . h i , so it’ ; 
Another interesting thing about absolutely than the sidebar, so it's on top 


positioned elements is that you can layer them 
on top of each other. But if you’ve got a few 
absolutely positioned elements at the same 
position in a page, how do you know the 
layering? In other words, who’s on top? 


Each positioned element has a property called 

a z-index that specifies its placement on an 

imaginary z-axis (items on top are “closer” to 

you, and have a bigger z-index). 
The header, main, and 
footer <dives are all 
in the flow, and flat 


on the page 
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more about 


Q: What is the position property 
set to by default? 


+ The default value for positioning 
is “static”. With static positioning, 
the element is placed in the normal 
document flow and isn’t positioned by 
you—the browser decides where it 
goes. You can use the float property to 
take an element out of the flow, and you 
can say it should float left or right, but 
the browser is still ultimately deciding 
where it goes. Compare this to the 
“absolute” value for the position property. 
With absolute positioning, you're telling 
the browser exactly where to position 
elements. 


1 Can | only position <div>s? 


A: You can absolutely position any 
element, block or inline. Just remember 
that when an element is absolutely 
positioned, it is removed from the normal 
flow of the page. 


Q: So, | can position an inline 
element? 


A: Yes, you sure can. For instance, 
it's common to position the <img> 
element. You can position <em>s, 
<span>s, and so on as well, but it isn’t 
common to do so. 


thereyareno 
Dumb Questions 


A Are there position property 
values other than static and 
absolute? 


A: There are actually four: static, 
absolute, fixed, and relative. You've 
already heard about static and absolute. 
Fixed positioning places an element in 
a location that is relative to the browser 
window (rather than the page), so fixed 
elements never move. You'll see an 
example of fixed positioning in a few 
pages. Relative positioning takes an 
element and flows it on the page just 
like normal, but then offsets it before 
displaying it on the page. Relative 
positioning is commonly used for more 
advanced positioning and special 
effects. 


Q: Do I have to specify a width for 
an absolutely positioned element just 
like the floated elements? 


A: No, you don't have to specify a 
width for absolutely positioned elements. 


But if you don't, by default, the block 
element will take up the entire width 
of the browser, minus any offset you 
specify from the left or right. This might 


be exactly what you want, or it might not. 


So set the value of the width property if 


you want to change this default behavior. 
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Q: Do | have to use pixels for 
positioning? 


A: No—another common way to 
position elements is using percentages. 
If you use percentages, the positions of 
your elements may appear to change as 
you change the width of your browser. 
So, for example, if your browser is 800 
pixels wide, and your element's left 
position is set to 10%, then your element 
will be 80 pixels from the left of the 
browser window. But if your browser 

is resized to 400 pixels wide, then the 
width will be reduced to 10% of 400 
pixels, or 40 pixels from the left of the 
browser window. 


Another common use for percentages 
is in specifying widths. If you don’t need 
specific widths for your elements or 
margins, then you can use percentages 
to make both your main content area 
and your sidebars flexible in size. You'll 
see this done a lot in two- and three- 
column layouts. 


Q: Do | have to know how to 
use z-indexes to use absolute 
positioning? 


A: No, z-indexes tend to be used 
most often for various advanced uses 
of CSS, especially when web page 
scripting is involved, so they’re a little 
beyond the scope of this book. But they 
are a part of how absolute positioning 
works, so it’s good to know about 
z-index (we'll come back to touch on 
z-index again in just a bit). 


layout and positioning 


Using absolute positioning 


We're now going to create a two-column Starbuzz page using techniques similar to 
those we used with the float version of the page; however, this time we’ll use absolute 
positioning. Here’s what we’re going to do: 


e First we’re going to make the sidebar <div> absolutely positioned. 
In fact, we’re going to position it in exactly the same place that we 
floated it to before. 


2) Next, we’re going to give the main content another big margin so 
that the sidebar can sit on top of the margin space. 


3) Finally, we’re going to give this a good testing and see how it 
compares to the float version. 


Changing the Starbuzz CSS senesber eae bith 
xm * ko the original 7 


Our HTML is all ready to go, and the sidebar <div> 1s right vies ae ke” folder. 

where we want it (below the important main content). All we need “chapter! |/abs 

to do is make a few CSS changes and we’ll have a sidebar that 1s a « ‘ 
absolutely positioned. Open your “starbuzz.css” file and let’s make You tan work out of the “absolute 

a few changes to the sidebar: folder, or copy the Files “index.html” 


and “starbuzz.ess” into the “starbuzz” 
folder and work from there, like we did. 
#sidebar { 
background: #efe5d0 url (images/background.gif) bottom right; 
font-size: 105%; 
padding: 15px; 
margin: Opx 10px 10px 10px; 


Bea CoE ay Okay, now we're going to specify that the sidebar is absolutely 


top: 128px; positioned 128 pixels from the top, and O pixels from the right 
right: Opx; L- of the page. We also want the sidebar to have a width, so let's 
; make it the same as the float version: 280 pixels. 
width: 280px ; ir 
} You'll see where the 128 Zero pixels from the 


came from in a see... right will make sure that 
the sidebar sticks to the 
right side of the browser. 
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using margins with positioning 


Now we just need to rework the main <div> 


Actually, there’s not much reworking to be done. We’re just adding a 
margin like we did with the float version. So, change the right margin 
of the main <div> to be 330 pixels, like you did last time. 


#main { 
background: #efe5d0 url (images/background.gif) top left; 
font-size: 105%; 
padding: 15px; 


margin: Opx 330px 10px 10px; 


Ce going to give the sidebar some space to be positioned over by giving the main <div> a 
big margin. This is really the same technique we used with the float. The only difference is 
the way the sidebar <div> is being plated over the margin. 


All you need to do is make that change to your margin, and then save. 
But before we take this for a test drive, let’s think about how this is going 
to work with the absolutely positioned sidebar. 


We've positioning the sidebar to be 128 pixels from 
the top, and up against the right side of the page. 
Keep in mind, the sidebar has 1O pixels of margin 
on the right, so the batkground color will show 


through that like before. 
The main <div> is flowed 


just below the header, 
so it will align with the 
top of the sidebar. Also, 
it has a right margin 
that is the same size 

as the sidebar, so all 

its inline content will 


be to the left of the 


1O—pixel top margin 


div id=“header’” 17 108 pixels for the header. You ean 
y see this height set in the CSS. 


div id=“sidebar’” oN 1O-pixel bottom margin 


div id=“main” 


The sidebar needs to be 
12 pixels from the top 


sidebar. Remember that 
the flowed elements 
don’t know about the 
absolutely positioned 
elements at all, so 

the inline content in 
the flowed elements 
doesn't wrap around the 
absolutely positioned 
elements. 
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div id=“footer” 


You might want to think about what happens to the 
footer. Because flowed elements don’t know about 
absolute elements, we can't use “clear” anymore. 
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because that’s exactly 
how much room the 
header takes uP, including 


margins. 


layout and positioning 


Time for the absolute test drive ss 


Make sure you’ve saved the new CSS and then reload 
“index.html” in your browser. Let’s check out the results: 


As you resize the 
browser, the sidebar 
always sits 12@ pixels 
from the top, and sticks 
to the right of the page. 


Wow, this looks amazingly 
like the float version; 
however, you know that 
the sidebar is being 
ositioned absolutely. 
j ; <~ and the sidebar has a 
]O-pixel right margin, so 
it has spacing between it 


The main Content area and the edge of the page. 


has a right margin that is 
exactly the width of the 
sidebar, and the sidebar Kites 
i top of that space. nd we've still got a 
ee : nice gutter between 
the two columns. 


But we are now back to having a problem with the 
footer. When the browser gets wide enough, the 
absolutely positioned sidebar comes down over the top 
of the footer. Unfortunately, we can’t fall back on the 
clear property this time, because flowed elements 
ignore the presence of absolutely positioned elements. 


When the browser is wide, the 

vertical space of the main 

content area is reduced, and 

ep the sidebar can Come down over 
jn the footer. 

Tein 


Werke, Fado eh 


ee 
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a solution for the two-column problem 


some HTML or CSS that easily 


Okay, enough already, all 
were trying to do is create two 
columns...why can't I just write 


creates two columns? 


Well, actually, you can... 


And to do that, you have to use a fairly new At this point, all 
capability of modern browsers: the CSS table . modern browsers 
display. What’s that? CSS table display allows support this. 


you to display block elements in a table with 
rows and columns (you'll see how in just a 
sec), and, by putting your content in a CSS 
table, you can easily create multicolumn 
designs with HTML and GSS. 


Now if you are thinking “why didn’t you 
tell us about this before?” well, it was 
important for you to understand how 
browsers flow and display content (because 
not every design task is going to look like 
two-column display). But now that you 
understand layouts, we can rework the page 
using CSS table display. 


Like all the other 
layout solutions, even 
table display has 

its advantages and 
disadvantages. 
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layout and positioning 


How CSS table display works 


You can think of a table like a spreadsheet—a table has columns and rows, and at 
the intersection of each column and row we have a cell. In a spreadsheet table, you 
can put a value, like a number or some text, in each cell. With CSS table display, 
each cell contains an HTML block element instead. 


This is the first column. 


In this table we have 4 
rows and 3 columns, for 
of 12 cells. 
This is the a total cells 
First row. 


In each cell, we can place an 
element, like a <div>. 


Let’s say you’ve got a page with three images and three paragraphs, and you want to 
lay them out in two columns with three rows. Here’s how you'd do that conceptually, 
using a table: 


This is the first column. ) In this table, we have 

three rows and two 
columns, for a total 
of six cells. 


This is the wa 


First row. 


: ae 
The table will 
automatically 
expand to 
accommodate 
the cell widths 
and heights. 


eo 


In each cell, we can 
place a block element. 


Notiee that, because we only put block 
elements into a table, we've wrapped 
the images in a <div>. 
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making two columns with 


al your pencil 
i Given what you know about CSS table displays, sketch out how the two columns 


from the Starbuzz page, “main” and “sidebar”, would fit into a table. Check the 
answer at the end of the chapter before moving on... 


( 


Draw your table here. 


How to create the CSS and HTML for a table display 


As you can imagine, we’re going to need to add some CSS to tell the browser to 
display our columns like a table, but we also need to add some HTML. Why? We 
need to add a bit of structure that represents the columns and rows of the table, 
and the structure of the enclosing table as well. 


Doing this is straightforward—all we need to do is create a <div> for the entire 
table and then one <div> per row. And for each column, we just need a block- 
level element that is placed within the row <div>. Let’s see how the HTML is 
going to work, and then we’ll come back to the CSS we need. 
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Adding HTML structure for the table display 


Let’s step through how we’re going to add structure to support the CSS 
table display using HTML: 


© First, we'll create a<div> that 
represents the entire table, 
and nest the columns and rows ) 


within that <div>. 


Next, for each row in the 
table, we'll create another 
<div> that will contain the 
row content. For Starbuzz, 


< / we have only one row. 


<div 
id=“sidebar’> 


<div id=“main’> 


Row 


© And, for each column, we just 
need a block element to act as 
that column. We already have 
two block elements we can 


DN ~ use: the “main” <div> and the 


Column 


your pencil 


Now it’s your turn: go ahead and write the HTML you'll need for the table 
structure for Starbuzz below. 


Write the HTML we'll need > 
for the Starbuzz table 
display layout here. 
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two-column him! solution 


Now it’s your turn: go ahead and write the HTML you'll need for the table 
structure for Starbuzz below. 


Here’s our answer! 


First, we'll weap everything that’s 
going to be displayed like a table in 
a <div> ¢alled “LableContainer’- 


pistehtn cote metstinret, 
f= See Le Then, we'll create a <div> for the 
anh ae katie = one row we need, and we'll call 


this <div> “tableRow”. 


(hr po mae banka A ey 
- Tessar Cheri Say, ine pereee an a 
Pp seed es nner poy lp al gr pak 
PCE CETL ides ay 
pe a resin) 
7 4 o_o ol ra) 
Lael de i 


women brn 
bi a rags aa oll es Has eins | 


; ; Finally, each Column for which we have existing 
aren mtesae a npreeenrreete 
i pemmemenrs,# Tear To 


. it? ~ . 
| <div>s “main” and “sidebar”, will be displayed as 
Ki a aot edo ws” oT mt) ee mi ymin, Day pe 
rain ren oe Tet Amie 


sae a Cell in the table. This is a very simple table 
| takai Bi Sieeoa pe layout because it has only two ¢ells, but You ¢an 
Sw es get a lot more complex than this if you need to. 


Let’s now write this in HTML... 


We're not showing it, but the header is up here... 
al 


Pre id="tableContainer"> iw hdd the new <div> with an id “tableContainer’ 
<div id="tableRow"> around the “main” and “sidebar <div>s. 
<div id="main"> > Then add the new <div> with an id “tableRow” 
aid also around the “main” and “sidebar” <div>s, 
</div> but nested inside the “tableContainer” <div>. 
<div id="sidebar"> 
</div> | 
</div> e- Make sure You properly nest your Closing <div> tags! 
</div> 


e and the footer is down here. Make sure you don’t 
include the header and footer in the new <div>. 
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How to use CSS to create table displays 


Now that you know how to add the HTML structure to support the CSS table display, let’s 
look at how we specify the CSS for each element to create the table display. 


First, we added a <div> for the table with the id “tableContainer". 
This <div> contains the rows and columns. We style the 
“tableContainer" <div> like this: 


The “tableContainer’” is the 
outermost <div> and represents 


the entire table structure. 


div#tableContainer { —— 
display: table; 
} 


Next, we added a <div> for the row, with the id “tableRow". We have 
only one row, with two cells, so we need just one <div>. If we had 
multiple rows, we'd need multiple <div>s. We style the row <div> like this: 


7 ” edi in the table. 
i Za The “tableRow <div> represents 2 row in 4) 7 
ge irene: We have one row in our table, so we just need this 


one rule. [f you have multiple rows, consider using a 
class instead (e.g, div-tableRow) so You Can use one 
rule to style all the rows. 


display: table-row; 
} 


3) Finally, we used our existing “main” and “sidebar” <div>s for the cells 
corresponding to each column in the row. We style these <div>s like this: 


The “main” and “sidebar” <div>s are the columns in 


#main { our table, so they eath get displayed as table cells. 
display: table-cell; 
background: #efe5d0 url (images/background.gif) top left; 
font-size: 105%; 
padding: 15px; 
margin: Opx 10px 10px 10px; 


} 

#sidebar { 
display: table-cell; 
background: #efe5d0 url (images/background.gif) bottom right; 
font-size: 105%; 
padding: 15px; 
margin: Opx 10px 10px 10px; 
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the css for two columns 


Meanwhile, back at Starbuzz... 


It’s time to add table display into Starbuzz to see how those columns are going to look. ‘To do 
that, we’re going to roll back to the Starbuzz HTML and CSS we created at the beginning of Rebechalks 

the chapter, so open “chapter! 1/tabledisplay” to get fresh copies of the HTML and CSS. Edit “ eouple af pages to 
“mdex.html”, and add the two <div>s around both the “main” <div> and the “sidebar” <div>— see the HTML if 
the outer one called “tableContainer” and the inner one called “tableRow”. Next, open your 


d to. 
“starbuzz.css” file and let’s add the following to the CSS: mee 


The display: table property tells the “tableContainer” 
#tableContainer { wa <div> that it will be laid out like a table. 
pele stad wa The border—spacing property adds |Opx of border spacing to the 


border-spacing: 10px; ea tells in the table. Think of border—spacing like margin for regular 
elements. And because we're using border—spacing on the cells, we no 


longer need the margins on the <div>s (see below). 
#tableRow { 
display: table-row; <—— The “tableRow” <div> is the first 
} (and only) row in our table. 
#main { 
display: table-cell; ala 
a Both the “main” <div> and the 
background: #efe5d0 url (images/background.gif) top left; «5 4.13.” cuiv> ave the cells 
font-size: 105%; Wiianivcnaue the in our table. “main” is in the ; 
adding: 15px; marains on both first column of the “tableRow 
i = sii ic. and “sidebar”. (because it comes first in the 
merger Seb (Pan terry HTML), and “sidebar” is in the 
vertical-align: top; v second Column. 
} 
#sidebar { 
display: table-cell; 
background: #efe5d0 url (images/background.gif) bottom right; 
font-size: 105%; 
padding: 15px; 

g P: And we need to add a Property, vertical-align, 
margin-—Opx—tOpx—_topx—_topx- that makes sure all the content in both table 
vertical-align: top; =< ~~ cells is aligned to the top of the cell (as 

} opposed to the middle or the bottom). 
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A quick test drive... ii gy cul 


The only 


remainind, issue 
is the extra 
space here... 


This is great! Our two columns look (almost) 
perfect. Try making the browser wider, and 
then narrower. Notice that both columns 

are always equal in height and we no longer 
have the problem with a column overlapping 
the footer. And we’ve got our content in the 
correct order for mobile users! 


There’s only one tiny little problem, which is 
easily fixed: notice that the spacing between 
the header and the columns, as well as the 
footer and the columns, is just a bit too large... 


What's the problem with 
the spacing? 


We currently have a 10px bottom margin on the 
“header” <div>, and a 10px top margin on the 
“footer” <div>. Before we added the table layout, 

we were specifying the margins of both the “main” 

and “sidebar” <div> to have a Opx top margin, so 
the total margin between them and the “header” is 
10px, and a 10px bottom margin. Now, remember 
that the vertical margin’s block elements sitting 
next to each other collapse—meaning that even 
though we had 10px of margin on the bottom of 
the columns and 10px of margin on the footer, 

this margin collapses into 10px, so the total space 

between the columns and footer is also 10px. 


When we removed the margins from the “main” 
and “sidebar” <div>s, we created the 10px of 
spacing using the border-spacing property in 
the “tableContainer” <div> instead. This adds 
10px of space between cells, as well as 10px of 
space around the edges. 


But the space created by border-spacing and 

a margin does not collapse! So we ended up with 
20px of space between the header and the columns, 
as well as 20px of space between the columns and 
the footer. Fortunately, it’s really easy to fix. 


layout and positioning 


a 


Sm hme 


a 


= — = a 


..and here. 


a As 
Be ee ee 2 a 


We've got lOpx of border spacing at the top and bottom 
of the table, and lOpx of margin on the header and footer. 
The margins don’t collapse with the border spacing, so we've 
got 2Opx of space where we want |Opx. 
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testing two columns 


Fix the spacing 


To fix the spacing between the header and the columns, and the footer and the columns, 
all we have to do is change the bottom margin of the header to be Opx and the top margin 
of the footer to be Opx. We currently specify all four sides of margin with the shortcut rule 
margin: 10px in the rules for both the header and the footer, so instead, we’ll expand 
that margin property to specify each side separately so we can specify 10px for all sides 
except the one next to the columns. Like this: 


#header { 
background-color: #675c47; Instead of having |Opx on all sides of the 
margin-top header, we now have |Opx on all sides 
margin: 10px 10px Opx 10px; except the bottom side, which has Opx. 
height: 108px; 

} 

#footer { 


background-color: #675c47; 
color: #efe5d0; 


text-align: center; 
ci Likewise, we now have lOpx of margin on 


dding: 15px; 
NT tsk 4 nie i all sides of the footer except the top. 
margin: Opx 10px 10px 10px; 

font-size: 90%; 


| ae | SU Hears en we sod = ta 


A. final test drive of Coffee 
our table display sas 


With this change, our columns are now perfect! 
We have 10px of spacing between all the pieces 
and the columns line up evenly, even if you 
expand or narrow the browser window. 


ecrwetacide e 
ithe Soe BoB 
ss a 


tr 5, a ben, tie Greys 
Ppl nie eh er abl af 


While display: table won’t always be the That cn Sais he 
right tool for your layout needs, in this case, it’s Sadana a tea ie 
the best solution to get two even columns of pa gab pe cai 
content in the Starbuzz page. STAAL EIU PRE RE Ui 
Wie lor pai coantacy ed ualfisteccieed ry 
fo Scares tae es Ovens 


Pe oho alee a i | 
Perfect! Aeon ie pre jer eat Ta rem 


vanish ee aaa ae aad al a, | 
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The Starbuzz CEO has decided to add a 
drinks menu column to the Starbuzz Coffee 
web page. He wants the new column to go 
on the left side, and be 20% of the width of 
the browser window. Your job is to add the 
new HTML to the existing page in the correct 
position, and then finish up the CSS below to 
make sure it displays as a table cell, like the 
other two columns do. Check your solution at 
the end of the chapter. 


The HTML for the menu 2) 


<div id="drinks"> 
<h1>BEVERAGES</h1> 
<p>House Blend, $1.49</p> 
<p>Mocha Cafe Latte, $2.35</p> 
<p>Cappuccino, $1.89</p> 
<p>Chai Tea, $1.85</p> Here’s how the CEO wants the 
<h1>ELIXIRS</h1> Starbuzz page to look with 


<p> the new Column on the lef+ 
We proudly serve elixirs brewed by our friends containing the drinks menu. 
at the Head First Lounge. 

</p> 


<p>Green Tea Cooler, $2.99</p> 
<p>Raspberry Ice Concentration, $2.99</p> 
<p>Blueberry Bliss Elixir, $2.99</p> 
<p>Cranberry Antioxidant Blast, $2.99</p> 
<p>Chai Chiller, $2.99</p> 
<p>Black Brain Brew, $2.99</p> 

</div> 


The new CSS...you need to finish it up! ) 


#drinks { YL ~Fill in this blank to get the 
ee: drinks <div> to display as 
background-color: #efe5d0; the first column in the page. 
width: 20%; 


padding: 15px; 
vertical-align: top; 
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thereyareno 
b Questions 


pum 


Q: So, | know we’re not covering HTML tables until 
later in the book, but is the CSS display: table similar 
to using HTML tables? 


A: It is similar in the sense that you’re creating 
structure in your HTML that you can map to the rows 

and columns of a table. But unlike HTML tables, CSS 
display-table is all about presenting the content in that 
structure using a table-like layout. HTML tables are for 
tabular data: data that should be structured as a table. So, 
using CSS display-table is a way of creating a certain kind 
of presentation layout, while HTML tables are all about 
structuring your data. You'll learn all about HTML tables in 
Chapter 13. 


Q: What do | do if | need more than one row in my 
table display? 


A: If you need to display content in multiple rows, then 
you just add more HTML structure to support that. If you 
take a look at the Starbuzz HTML, you'll see we have two 
columns (or three, after you add the Beverages column) 
in one row. To add another row, you’d add another 

<div> similar to the “tableRow” <div>, nested inside the 
“tableContainer” <div>, and containing the same number 
of columns as the first row. You can keep adding rows by 
adding more <divs> like this. 


Q: Why did we add the vertical alignment to each 
cell in the CSS with vertical-align: top? 


A: We added vertical-align: top to each table cell to 
make sure that all the content aligns with the top of the 
cell. If each cell is aligned this way, then the content in 
each of our Starbuzz page columns should align at the top, 
which makes for a more professional-looking presentation. 
If you don’t add a vertical alignment, you may find the 
default alignment in your browser is set to middle instead. 
In some cases, that might be what you want, of course! 
You can set the vertical alignment to top, middle, or bottom. 


Q: Does it matter how much content | put in a cell? 


A: Not really. You'll probably want to make sure that 
no one column has so much more content than other 
columns that your page looks unbalanced, but ultimately, 
it's up to you and how you want your page to look. 


Q: Can we control the width of the columns? 


A: Yes, you have some control over the width of the 
columns with the width property. In the exercise to add 
the Beverages column that you just did, you probably 
noticed that we set the width of the column to 20%. You 
can set the width of each column like this (and it’s a good 
idea to make sure the widths add up to 100%!). By using 
percentages, your table will still expand and contract 
appropriately as you resize the browser window. 
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Strategies for your CSS layout toolbox 


As you've seen, there are a variety of methods you can use to lay out your 
pages using HTML and CSS. And we didn’t have to change the HTML much 
to change the layout of the page; other than moving a piece of content around 
(for handling the floating sidebar), and adding a couple of <div>s (for the 
table display layout), you handle the presentation of your content entirely with 
your CSS. That’s really the idea: your HTML should be all about structuring 
your content, and the CSS is what handles the layout. Which method you 
choose for doing that layout is up to you and is going to depend on the kind of 


layout you choose and how flexible you want it to be. 


Let’s review. 


The Floating Layout 


We used float to lay out the lounge page and float the elixirs 
<div> to the right of the main content in the page. In this case, 
float was perfect because we wanted the main content to flow 
around the elixirs <div>, which it did just beautifully. We haven’t 
used it this way yet, but float also works great for floating 
images within a paragraph of text, and having the text flow 
around the image. 


We then used float to float the sidebar <div> in the Starbuzz 
page, and used clear to make sure that the floating sidebar 


didn’t overlap with the footer. 


The big downside is that we have to move the entire <div> we’re 


Ww Float works great for the 
lounge page; it’s okay for 
Starbuzz, but we'd like to 
keep the sidebar content 
below the main content 
and have equal Columns. 


floating above the main content of the page, which isn’t always =e 
optimal if that ordering doesn’t reflect the relative importance of 

the content in the page. Another potential downside is that it’s 

impossible to create two equal columns of content with float, 

so if that’s your goal, you'll need another solution. 


The Jello Layout 


Next we created a frozen layout by wrapping a fixed-size 


<div> around all the content in the page, and then we made it Jello gives You a 


jello by allowing the margins to expand with the auto property nicely centered, 
value. This makes for a great-looking layout, and lots of pages Fixed-size area 
on the Web use this design; for instance, you'll see a lot of blogs of content 
set up this way. This also solved the problem of our content with expandable 
ordering. The disadvantage here is that the content doesn’t margins. 
expand to fill the entire browser window (which many people 
don’t find to be a disadvantage at all). < ) 
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Strategies for your CSS layout toolbox (continued) 


Absolute Gives you a nite 


liquid main content area 
The Absolute Layout with a fixed sidebar. 


We then used absolute positioning to get back to a liquid 

layout, and this also allows us to keep our content in the order we 

want. By setting the sidebar to a specific width, and positioning it 

to the right of the main content, we have a main content area that 

expands and contracts with the size of the page, and a sidebar that ee 

stays fixed in size and is anchored to the right side of the browser Sa 


a) a 
window. This is a great choice for layouts when you want one 


part of your page to be fixed in size and one part to expand and 


contract, or when you need an element to be located at a precise oo a 
ee, | SS 
location (we’ll see how to do that shortly!). lll 


ranean 
The downside for the Starbuzz page, however, is that the sidebar er 


overlaps the footer again when the browser is wide. So we 


continued in our quest for two perfect columns, and moved on to... 


With table display, 
we got the even sass 


i : : anted. 
With the table display layout, we hit the jackpot of layouts for Columns ( mee 


The Table Display Layout 


Starbuzz. We did have to add a couple of <div>s to our HTML 
structure to get it to work right, but that paid off with two perfectly 
aligned columns that expand and contract beautifully with the size 


Seer eeas: Leryverens TREE 
Cen 


of the browser window. 


In this case, the structure we added to the page was purely in 
support of the layout; it didn’t add any meaning to the page. You'll 
find that <div> is often used that way (and in fact, when you get to 
the next chapter, you’ll see this is even more true today than it was 
just a few years ago). But don’t go <div> crazy; you want to pick 
the best layout for your needs and add as few <div>s as necessary 
to get the layout you want. 


Table display layout isn’t always the right choice for layout, but for 
Starbuzz, it works perfectly and even let us easily expand to add a 
third column for the Beverages menu. Nice! 


There are as many page designs on the Web as there are 
designers, but many of those designs are based on the layouts 
you’ve learned about here (or some variation of these). You 


Table display is easy to expand 


to more Columns (or rows!). 


now have several strategies in your layout toolbox to choose 
from, so you’re in good shape to handle just about any layout 
job your boss might throw at you! 
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Hey, the site is looking great, and 
I really like the CSS table layout, but I 
noticed that the header at the top with 

the logo and the slogan doesn't expand with 
the page. I mean, it feels like the slogan 
should move to the right if I expand my 
browser window. 


Yup, we agree. 


Except for the header, the Starbuzz page expands nicely as you 
make your browser window wider. Thanks to the CSS table 
layout, the columns expand proportionally as you expand the 
window, and because the footer text is centered, the footer always 
looks like it’s in the middle of the page, whether the page is 

wide or narrow. But the header doesn’t expand as nicely. The 
background color does, but the Starbuzz slogan always seems 
stuck in the same place, while you might expect that it would be 
anchored to the right side of the window. 


The reason the header isn’t expanding with the rest of the page 
is because the header is one image with both the Starbuzz logo 
and the slogan in it. And that image is exactly 800px wide. If 
your browser window is opened wider than 800px, you see a lot 
of extra space over on the right. And likewise, if your browser 
_ window is narrower than 800px, you'll see the image fall off the 
f side of the browser window. 


Can we fix it? 
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Problems with the header 


Go ahead and play with the page a bit by opening your browser window wider than the 
header image, and then narrower than the header image. You'll see that the header isn’t 


working quite like we’d like it to yet. 
And when the browser is narrower than 800px 


wide, the slogan part of the header image falls 
off the edge of the browser window! 


When the browser window is more than 
80Opx wide, you get all this extra space 
over here to the right. 


aemeeiiatin —_ 


Eo esi 


—=w % 
a) ae Ld 


The rest of the page resizes nicely as you 


widen and narrow the browser window. 


ig RAIN 

POWER 
If we split the header image into two different images, one with the logo and one with the slogan, 
can you think of ways you might lay out the two images in the <div id=“header’> element so 


they are positioned correctly (that is, the logo stays on the left of the header, while the slogan is 
always anchored to the right part of the header, even if you open up your browser window)? 


aa We can easily split the header into two ~ 
ye gif images (they both have a transparent providing ell the caffsine 
background with a matte that works you need to pawe 
perfectly with our coffee—colored life. just cr 
background color in the header). : 


FOUL 
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Fixing the header images with float 


It’s often true that there are multiple strategies to solving a layout problem with CSS, 
and that’s certainly the case here. The way we’re going to solve it 1s to use float. You 
already used float once, to lay out part of the Starbuzz page, before we switched to 
using the CSS table layout. But there’s no reason you can’t mix and match different 
strategies, like table display with float in the same page; in fact, it’s very common. So 
let’s take a look at how we’re going to do this. 


© Split the header image into two images a 


We already did this for you; you'll find the images “headerLogo.gif” 
and “headerSlogan.gif” in the “chapter11/starbuzz/images” folder. 


headerSlogan.gif ) 


© Update your HTML to use these images 


Next, you need to update your HTML to replace the existing header 
image, which is one big 800-pixel-wide image, with the two images 
we created in Step 1. We’ll go ahead and give each image an id that 
we'll use to select each of them in our CSS. 
<div id="header"> 
: - 4 ae ee Peay 1 toffee} : . P 
<img id="headerLogo" 
src="images/headerLogo.gif" alt="Starbuzz Coffee logo image"> 
<img id="headerSlogan" 
src="images/headerSlogan.gif" 
alt="Providing all the caffeine you need to power your life."> 
</div> 


© Fix the images with CSS 


Finally, you need to get the images laid out in the header correctly. If 
you load the page now, you'll see both images in the header, right next 
to each other over on the left side of the page. 


But now, the slogan image is right next to the logo 


The logo image looks okay where it is... image. We nee d to move it over here with CSS. 
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This CSS is so easy you could probably do it in your sleep, after all the layout experience you've 
had in this chapter already. Go ahead and write the CSS to fix the images in the header. You 
know you're going to use float; fill in the blanks below with the rest of the rule you need to get 
the images into the right place. Check your answer at the end of the chapter before you go on. 


Test drive your float ss 


Get your CSS updated in “starbuzz.css” and reload the Now the slogan image is all the way over on 
Starbuzz page. You should see the header slogan image the right, and it stays there, even if You 
all the way over on the right side of the page, just where it change the browser window size. 


should be, and, better yet, it stays over on the right even if 
you open your browser really wide. Success! 


Ld 


How float works in the header 


Remember the steps for how to float an element from 
earlier in the chapter: 


Give the element an identity. We gave the image we 
wanted to float the id “headerSlogan”. Check. 


Give the element a width. We didn’t actually have 


1 es 
Stkimwroree | psoas 
FS ETE bse Sees on np a | 


to do that explicitly this time (although you could). Why? seca snecon dove parses 

. . i porte p pire 
Because an image element has a specific width by default: belies “) 
it’s the width of the image itself. CSS recognizes that the rrsares i 


image has a width, so we don’t have to specify it ourselves. 


Float the element. Check, we floated it. The <img> is 
nested in the “header” <div>, so it floats up to the top 
right of the <div>. But remember, we set the height of 


the header to be exactly the same as the height of our two 
images. And, as we explained before, the other inline content in the 
page will flow around the floated element. In this case, the other 
inline content in the header is the logo image, which happens to also 
be exactly the same height as the slogan image and the header. So 
the two images line up perfectly! 
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thereyareno 
Dumb Questions 


Q: Why didn’t we have to add “clear: Q: What if | float an image that’s in a Q: Could we have positioned the 


right” to the “tableContainer” <div> 
below the header? 


A: Because the image we floated is the 
same exact height—108px—as the other 


paragraph of text? header images using one of the other 
layout strategies we talked about? 

A: Then the text will flow around the 

image. It works just like when we floated the > Yes, indeed. There is usually more 

elixirs <div> in the lounge; remember how than one way of doing things in CSS. 


image in the header, so there’s no room for the text in the rest of the page flowed around _ Another strategy might have been to use 
the other content in the page to move up and __ that <div>? Same thing if you float an image. absolute positioning. We'll look at how to 
flow around the floated image. Both images absolutely position an image next. 


take up the exact same amount of vertical 
space, so the other elements in the page 
Stay firmly in their places. 


huge. Can 


Hey guys! Starbuzz just won the 
Roaster of the Year Award. This is 


center? All our customers need to see this. 
Top priority; make it happen! 


we get it on the page front and 


The award 


Well, we could just throw 
this as an image into any old 
paragraph on the page, but 
the CEO really wants this 

to be noticeable on the page. 
What if we could place the 
award on the page like this? 


Not only does that look great, 
but it’s exactly what the 

CEO wants. But how? Is this 
another situation for using 
float? Or are we going to 
need another strategy? 
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Adding the award 


Notice that the award is sitting in a position that overlaps both the header 
and the main part of the page. It would be pretty tricky to get a floated 
image into this position. Not only that, but we know the award shouldn’t 
affect the flow of any other elements in the page. 


This sounds like a job for absolute positioning. After all, by using absolute 
positioning you can place it anywhere you want on the page, and since it 
isn’t in the flow it won’t affect any other element on the page. Seems like an 
easy addition to make to the page without disrupting what’s already there. 


Let’s give it a try. Start by adding a new <div>, just below the header (the 
CEO thinks this is pretty important, so it should be up high in the order of 
content). Here’s the <div>: 


The <di 
<div id="award"> i» The <div> 


L ; contains the 
<img src="images/award.gif" image of the 
alt="Roaster of the Year award"> 


</div> 


Positioning the award 


We want the award to sit just about in the middle of the page when 
the browser’s open to 800 pixels (a typical size for browser widths) and 
just overlapping the main content <div>. 


So we’re going to use the top and left properties to position the 
award 30 pixels from the top, and 365 pixels from the left. 


“\ 


#award { We're using an absolute position 
position: absolute; [oy the award <div> that is 0 
top: 30px; pixels from the top and 365 
left: 365px; pixels from the left, 

} 


Add this CSS to your “starbuzz.css” file, save, and reload the web page. 


You'll see the award image appear like magic, right where we want it. feos nang hich 
; ; aa pehehee ae | 
Make sure you resize the browser to see how the award displays. ae 
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Q: Seems like absolute positioning is 
better than float because | have more control 
over where the elements go. Should | prefer 
absolute positioning over floating? 


A: Not really; it just depends on what you 
need. If you really need an element to appear 

at a precise position in the page, then absolute 
positioning is the way to go. But if you want to, 
say, have text flow around an image, you can’t 
easily do that with absolute positioning; in that 
case, you'll definitely want to use float. You'll find 
uses for both fairly regularly. 


Q: | was playing with a couple of absolutely 
positioned <div> elements, and one always is 
displayed on top of the other. Is there a way | 
can change which one is on top? 


A: Yes, every positioned element has what 
is called a “z-index,” which is the ordering of the 
elements on an imaginary z-axis (think of it as 
pointing out of your screen). You use it like this: 


#divl1 { 
position: absolute; 
top: 30px; 
left: 30px; 


z-index: 0; 


} 


#div2 { 
position: absolute; 
top: 30px; 
left: 30px; 


z-index: 1; 


} 


Those rules would place the element with id “div2” 
on top of the element with an id “div1”. 


layout and 


Q: How do | know what z-index each 
element on the page is by default? 


A: You don’t really, unless you inspect the 
CSS the browser computes for each element in 
the page with developer tools. But most of the 
time you won't care about the z-index of elements 
unless you are specifically layering them or you 
run into a situation like we did with the award. 
Usually just setting the z-index to 1 is good 
enough to make sure an element is above other 
elements in the page, but if you have multiple 
elements you are positioning and layering yourself, 
you'll have to be a little more deliberate about the 
z-index values. 


Q: Is there a maximum z-index value? 


A: Yes, but it’s a very large number, and 
practically, you'll never need your z-index values 
to go that high. 


Q: What about negative z-index values, can 
you have z-index values of, say, -1? 


A: Yes, you can! The same rules apply (that is, 
the more positive and larger the value, the higher 
the layer, and the closer it is to you on the screen). 


Q: Can any element have a z-index? 


A: No, only elements that have been 
positioned with CSS using absolute, relative, or 
fixed positioning. You'll see an example of fixed 
positioning next! 
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we need fixed positioning 


Hey, can we get a coupon on the 
site and put it right in customers’ 
faces so they can't miss it? I'd 
like to offer one free coffee to 
everyone who clicks on the coupon— 
for a limited time, of course. 


Just the words we’ve been 
waiting for: “right in the 
customer’s face.” 


Why? Because it’s going to give us the 
opportunity to try a little fixed positioning. 
This is the last kind of positioning we’re 
going to use in the chapter, so let’s make it 
fun. What we’re going to do is put a coupon 
on the page that always stays on the screen, 
even if you scroll. Is this a great technique to 
make your users happy? Probably not, but 
work with us here...it is going to be a fun way 
to play with fixed positioning. 
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How does fixed positioning work? 


Compared to absolute positioning, fixed positioning is pretty Impress Lviends and coworkers by 
straightforward. With fixed positioning, you specify the position of an referring to the browser window as 
element just like you do with absolute positioning, but the position is em ine viewport. Try it-it works, and 
an offset from the edge of the browser’s window rather than the page. the W3C will nod approvingly. 


The interesting effect this has is that once you’ve placed content with 
fixed positioning, it stays right where you put it and doesn’t move, 
even if you scroll the page. 


So, say you have a <div> with an id of “coupon”. You can position 
the <div> fixed to a spot 300 pixels from the top of the viewport, and 
100 pixels from the left side, like this: 


Here’s the id selector 


he ¢ <div>. ; ‘g@oen — 
for the coupon We've sing ie < 
WA Positioning. 3 
x 
o- 
9 
#coupon { a 
Sis ees a ee : 100 
position: fixed; pixels div id=“coupon” 
top: 300px; 
left: 100px ; 


Position the coupon 300 pixels 
from the top, and 100 pixels 
from the left. You can also use 
right and bottom, just like with 
euee lees Here’s where the element gets 
positioned within the viewport. 
Once you’ve got an element positioned, then comes the fun: scroll 
around...it doesn’t move. Resize the window...it doesn’t move. 
Pick up your monitor and shake it...it doesn’t move. Okay, just 
kidding on the last one. But the point 1s, fixed-position elements 
don’t move; they are there for good as long as the page is displayed. 


Now, we’re sure youre already thinking of fun things to do with 
fixed positioning, but you’ve got a job to do. So let’s get that 
coupon on the Starbuzz page. 
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Putting the coupon on the page 


Now we’re going to get the Free Coffee Coupon on the page. 
Let’s start by creating a <div> for the coupon to go into: 


« ; Inside we've got an image of the coupon, whith you'll 
Here’s the <div> with an id of “coupon”. find in the “chapterl |/starbuzz/’ images” folder 


L 


<div id="coupon"> 
<a href="freecoffee.html" title="Click here to get your free coffee"> 
<img src="images/ticket.gif" alt="Starbuzz coupon ticket"> 


</a> 


</div> ms 


And we've wrapped the image in an <a> element so that users Can Click 
on the image to be taken to a page with a coupon they Can print. 


Go ahead and add this <div> at the bottom of your “index.html” file, just 
above the footer. Because we’re going to position it, the placement in the 
HTML will only matter to browsers that don’t support positioning, and the 
coupon isn’t important enough to have at the top. 


Now let’s write the CSS to position the coupon: 


We're setting the coupon to fixed positioning, 3 
acre : fixed; a pixels from the top of the viewport, and let’s put the 
, left side right up against the edge of the viewport. So 


top: 350px; 
left: re ; we need to specify O pixels from the left. 


} 
We need to style the image and the links, to0; otherwise, 
#coupon a, img { _—, we may have borders popping up on the image because 
border: none; it is clickable. So, let’s set the border on the image to 
} none, and do the same on the links. We're using the same 


property for both, so we can combine the rules into one. 


Remember that we have a rule in the CSS that says to turn off text— 
decoration, and use a border to underline links instead. Here, we're 
overriding that rule for the link in the coupon <div> and saying we 
don’t want any border on the link. Go back and look at the original CSS 
if you need to remind yourself of the other rules for the links. 
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Putting the coupon on the page 


Add the new coupon rules to your “starbuzz.css” file, 
save, and then reload the page. You may need to make 
the browser smaller to be able to see that the coupon 
stays put even when you scroll. Clicking on the coupon 
should take you to the “freecoffee.html” page. 


You know, this looks great, but it might just be even more 
snazzy if the coupon was offset to the left, so it looks like 
it’s coming out of the side of the viewport. Now, we could 
get into our photo editing software and cut off the left 


side of the image to create that effect. Or we could just SSe eta 
use a negative offset so that the left side of the image is Derren are nem eee oe 


positioned to the left of the edge of the viewport. That’s 
right, you can do that. 


Using a negative left property value 


Specify a negative property value just like you do a positive one: 
just put a minus sign in front. Like this: 
By specifying —10 pixels, 
we've telling the browser to 


#coupon { position the image 40 pixels 
position: fixed; to the left of the edge of 
top: 350px; the viewport. 
left: -90px,; pom = awe a) 
} ~n 
40 z 
pixels g 
— = 


The browser will gladly position the 
image to the left of the viewport 
for You, and only the part of the 
image that is still on the sereen 
will be viewable. a 
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A rather positive, 
negative test drive 


Make sure you’ve put in the negative left property 
value, save, and reload the page. Doesn’t that look 
slick? Congrats, you’ve just achieved your first GSS 


special effect. Watch out, George Lucas! 
C using, fixed > 


Just remember, 

positioning to cover up Your 
tontent is not the most 
user-friendly thing, to do, 
but it is FUN. 


Can you believe how good this 
site looks? I mean, look at where 
it started compared to now. Okay, 
but we've still got our work cut out 
for us. I've got big ideas...I want to 
start a blog, and we need to build 
the Bean Machine! 


| Hite Hen, $14 

| A tenes, roe i biirmad  eeieee. Corem Maen, Beab rea ped Cage 
| Mocha Cufe (Latte, $2.94 

Donen, cued a aed ches ry 

| Cappuceine, $189 


Ae es ceed ei ees 
| Chal Tea, 518 


| RLY IR RR ge, DO dy. 


eS | \ 
a Wow! What a difference! 
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Time to put all this knowledge about floating and absolute positioning 
to the test! Take a look at the web page below. There are four elements 
with an id. Your job is to correctly match each of these elements with 
the CSS rules on the right, and fill in the correct id selector for each 
one. Check your answers at the end of the chapter. 


erie nase Fill in the selectors te 
+ oe 


ees el complete the CSS. 


div id=“header” div id=“navigation” 


div id=“main” 


image Bhat margin-top: 140px; 
a oes margin-left: 20px; 


position: absolute; 
top: 20px; 
left: 550px; 
width: 


position: absolute; 
top: 20px; 
left: 20px; 
width: 500px; 
height: 100px; 


535 


www.it-ebooks.info 


more questions 


thereyareno 
b Questions 


pum 


Q: The fixed coupon is cool, but 

kind of annoying. Is there another 

way we could position it so it doesn’t 
overlap content, say at the bottom of the 
Beverages column? 


A: Sure. You could position the coupon at 
the bottom of the Beverages column using 
something called relative positioning. We 
didn’t cover this kind of positioning, but it’s 
similar to absolute except that the element 
is left in the flow of the page (where it 

would normally be), and then shifted by 

the amount you specify. You can shift the 
element using top, left, bottom, or right, just 
like with absolutely positioned elements. 
So, let’s say you wanted the coupon below 
the drinks in the Beverages column: you'd 
move the coupon so it’s nested in the 
“drinks” <div> at the bottom, and then set the 
position property to relative. After that, it’s 
up to you to put the coupon precisely where 
you want it; you could position it 20px below 
the drinks with top: 20px, and hanging off 
the left side of the page with left: -90px (just 
like we did with fixed). 


Q: So the four kinds of positioning are 
static, absolute, fixed, and relative? 


A: That's right. Static is what you get by 
default if you don’t specify any positioning. It 
leaves everything to flow as normal into the 
page. Absolute takes an element completely 
out of the flow of the page and allows you to 
position it at an absolute position relative to 
the closest positioned parent element (which 
is <html> unless you specify one yourself); 
fixed positions an element at a specific, fixed 
position relative to the browser window; 

and relative positions an element relative 

to its containing element by leaving it in the 
normal flow, and then shifting it over by an 
amount you specify. 


You can also use these positioning 
techniques together. For instance, 
remember how we said the absolutely 
positioned elements are positioned relative 
to the closest positioned parent? You could 
absolutely position a <div> within another 
<div> by positioning the outer <div> with 
relative (leaving it in the flow), and then 
positioning the inner <div> with absolute, 
allowing you to position it relative to the 
parent <div>. 


As you can see, there is a huge variety in 
the ways you can position elements with 
CSS positioning. 


Q: Could you position an element 
completely off screen if you wanted? 


A: Yes! For instance, the coupon image is 
283 pixels wide, so if you set the left position 
to -283px, the coupon would disappear. It’s 
still there on the page; it’s just not visible in 

the viewport. Remember, the viewport is the 
visible area of the page. 


Q: What if we want to animate 
elements, like if we wanted to show the 
coupon sliding into the page from the 
left? Is that possible with CSS? 


A: Actually, it is, and we're glad you 
asked. It’s beyond the scope of this book 

to get into CSS animation, but CSS3 
introduced basic animation for elements with 
the transform and transition features, which 
is exciting for us web geeks. It’s fairly limited, 
but you can do some pretty cool things with 
CSS animation. If you want more than what 
you can do with CSS, you'll have to use 
JavaScript, and that’s a whole other topic. 
We give you a brief introduction to CSS 
transforms and transitions in the appendix 
just to whet your appetite. 
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as BULLET POINTS 


Browsers place elements in a page using flow. 


= Block elements flow from the top down, with a linebreak 
between elements. By default, each block element takes 
up the entire width of the browser window. 


= Inline elements flow inside a block element from the top 
left to the bottom right. If more than one line is needed, 
the browser creates a new line, and expands the 
containing block element vertically to contain the inline 
elements. 


= ~The top and bottom adjacent margins of two block 
elements in the normal page flow collapse to the size of 
the larger margin, or to the size of one margin if they are 
the same size. 


= Floated elements are taken out of the normal flow and 
placed to the left or right. 


= Floated elements sit on top of block elements and don’t 
affect their flow. However, the inline content respects the 
boundaries of a floated element and flows around it. 


= The clear property is used to specify that no floated 
elements can be on the left or right (or both) of a block 
element. A block element with clear set will move down 
until it is free of the block element on its side. 


= A floated element must have a specific width set to a 
value other than auto. 


= ~Alliquid layout is one in which the content of the page 
expands to fit the page when you expand the browser 
window. 


= A frozen layout is one in which the width of the content 
is fixed, and it doesn’t expand or shrink with the browser 
window. This has the advantage of providing you more 
control over your design, but at the cost of not using the 
browser width as efficiently. 


= = Ajello layout is one in which the content width is fixed, 
but the margins expand and shrink with the browser 
window. A jello layout usually places the content in the 
center of the page. This has the same advantages as 
the frozen layout, but is often more attractive. 


There are four values the position property can be set 
to: static, absolute, fixed, and relative. 


Static positioning is the default, and places an element 
in the normal flow of the page. 


Absolute positioning lets you place elements anywhere 
in the page. By default, absolutely positioned elements 
are placed relative to the sides of the page. 


If an absolutely positioned element is nested within 
another positioned element, then its position is relative 
to the containing element that is positioned. 


The properties top, right, bottom, and left are used 
to position elements for absolute, fixed, and relative 
positioning. 


Absolutely positioned elements can be layered on top of 
one another using the z-index property. A larger z-index 

value indicates it is higher in the stack (closer to you on 

the screen). 


Fixed-position elements are always positioned relative 
to the browser window and do not move when the page 
is scrolled. Other content in the page scrolls underneath 
these elements. 


Relatively positioned elements are first flowed into 
the page as normal, and then offset by the specified 
amount, leaving empty the space where they would 
normally sit. 


With relative positioning, left, right, top, and bottom refer 
to the amount of offset from the element’s position in the 
normal flow. 


CSS table display allows you to lay out your elements in 
a table-like layout. 


To create a CSS table display, use a block element 
for the table, block elements for the rows, and block 
elements for the cells. Typically, these will be <div> 
elements. 


Table display is a good layout strategy for multicolumn 
layouts where even columns of content are needed. 
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HTMLcross 


This has been a turbo-charged chapter, with lots to learn. Help it all sink in by doing 


this crossword. All the answers come from the chapter. 


Across 
4. State between liquid and frozen. 
6. Method browser uses to position static elements on the 
page. 
7. This kind of offset was used on the coupon for a special 
effect. 
10. Usually used to identify an element that is going to be 
positioned. 
11. When boxes are placed on top of each other, these 
collapse. 
12. When you place two inline elements next to each other, 
their margins don’t 
15. Absolute positioning is relative to the positioned 

block. 
16. Inline elements are flowed from the top : 
17. A positioning type that keeps elements in the flow. 
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Down 

1. Special inline elements that get grouped together into 
boxes as the page is laid out. 

2. Use to create space between cells in a 
table display. 

3. Block elements are flowed top to ' 

5. Type of positioning that is relative to the viewport. 

6. Removes element from the flow, and sets it to one side. 
8. In general, is a better technique for column 
layouts. 

9. Another name for the browser window. 

12. Property used to fix footer overlap problems. 

13. Inline content flows around elements. 

14. Property that describes the layering behavior of 
positioned elements. 
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BE the Browser Soutien 
Open your “lounge.htm]” file and locate 
all the block elements. Flow each one 
on to the page below. Just concentrate 
on the block elements 
nested directly inside 

the body element. You 
can also ignore the “float” 
property in your CSS 
because you stil] don’t know what it 
does. Here’s the solution. 


Here's your page. Flow 


the block elements in 
“lounge-html” here. ? 


Each block element 
in Your “lounge. 
html” file is flowed 
from top to bottom, 
with a linebreak in 
between. 


a Loa We didn't ask you 


to, but if you 
Some of these elements went the extra 
have nested block mile, here's how 
oC elements in them, like the the elements in 
<ul>, the elixirs <div>, and the elixirs <div> 
the footer <div>. get flowed. 
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=r 


Move the elixirs <div> back to its original [aes 


Ly . ee ; 
$e place below the main recommendations, ccindiamenie ee 
OLutiOn then save and reload the page. Where ims 


does the element get floated now? iwalnkoae 

ele bee = joer Beer 
You should see the elixirs below the 2 teasiandeal ent aes mere 
main content and beside the music 


+ Pani es SR Rate: Mey 
recommendations and the footer. APS REmeAA pad racine Deenent eioeing os pari 


ae en deren oe! Ree tae eer 


The <div> is floated 

to the right, just 

below the main 

content, and the > 
remainder of the 

HTML is floated 

around it (which is the 


musié. recommendations 


and the footer). Es ai a : 


Smecges! 


a mater 


ie ay 


What we want to do is set a right margin on the main content section so that 
it’s the same width as the sidebar. But how big is the sidebar? Well, we hope 
you aren't already rusty since the last chapter. Here’s all the information you 
need to compute the width of the sidebar. And here's the solution. 


#sidebar { 
background: #efe5d0 url (images/background.gif) bottom right; 
font-size: 105%; 
padding: 15px; 


margin: Opx 10px 10px 10px; 
width: 280px; 
float: right; 


left paddi 
right padding 
content area 


540 Chapter 11 


www.it-ebooks.info 


layout and positioning 


The Starbuzz CEO has decided to add a drinks menu 
} column to the Starbuzz Coffee web page. He wants 
Ea ise the new column to go on the left side, and be 20% of 
Lution the width of the browser window. Your job is to add the 
m new HTML to the existing page in the correct position, 
and then finish up the CSS below to make sure it 


displays as a table cell, like the other two columns do. 
Here's our solution. 


— “tableRow” <div>, above the “main” 
<div id="tableContainer"> ( <div> so the content comes first and 


“ We added the HTML inside the 


<div id="tableRow"> is the first column in the page (and 
<div id="drinks"> the first cell in the table layout). 
<h1>BEVERAGES</h1> 


<p>House Blend, $1.49</p> 
<p>Mocha Cafe Latte, $2.35</p> 
<p>Cappuccino, $1.89</p> 


Here’s how the CEO wants the 
Starbuzz page to look with 


—— ae a . 85</p> the new column on the left 
* cues > containing the drinks menu. 
P 


We proudly serve elixirs brewed by our friends 
at the Head First Lounge. 
</p> 
<p>Green Tea Cooler, $2.99</p> 
<p>Raspberry Ice Concentration, $2.99</p> 
<p>Blueberry Bliss Elixir, $2.99</p> 
<p>Cranberry Antioxidant Blast, $2.99</p> 
<p>Chai Chiller, $2.99</p> 
<p>Black Brain Brew, $2.99</p> 
</div> 
<div id="main"> 


The new CSS...you need to finish it up! ) 


#drinks { To get the drinks <div> to display 
display: table-cell  ; ae as the first column in the page, we 
background-color: #efe5d0; — set the display to table—cell. 
width: 203%; 

padding: 15px; 

vertical-align: top; 
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r pencil 
see 


Time to put all this knowledge about floating and positioning to the 
test! Take a look at the web page below. There are four elements with 
an id. Your job was to correctly match each of those elements with the 
CSS rules on the right, and fill in the correct id selector for each one. 
Here's the solution. Did you get them all correct? 


Fill in the selectors to 
‘ = complete the CSS. 


div id=“header” div id=“navigation” 


divid=“main®” s—<—sS ee Perera { 
margin-top: 140px; 
margin-left: 20px; 


width: 500px; 


img id=“photo” 


position: absolute; 
top: 20px; 
left: 550px; 
width: 


position: absolute; 
top: 20px; 
left: 20px; 
width: 500px; 
height: 100px; 
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This CSS is so easy you could probably do it in your sleep, after all the layout experience you've 
q ‘So had in this chapter already. Go ahead and write the CSS to fix the images in the header. You 
ste know you're going to use float; fill in the blanks below with the rest of the rule you need to get 
LutiOn the images into the right place. Here's our solution. 


#header img4theaderSlogan eo ON 
You could also just use #headerSlogan 
float: __vight __; here as the selector if You want. 


HTMLeross Solution 


'T °B 
“B Eek °F 
“F/LIO|W x R I 
L T T D x 
O T NIE|/E/APTIIPVIE 
A O R A 'T|D 
T MARGINS B E 
P L W 
COV ELA P |S] € P 
oF L Cc D O 
L E I I R Z 
TC ON TAINING S T I 
A R G P N 
T L D 
"EE HET RIE/LIA|/TIT/VIE 
D y x 
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Given what you know about CSS table displays, sketch out how our two 


lution columns from the Starbuzz page would fit into a table. Check the answer 
at the end of the chapter before moving on... 


ard 


This is the first column. vereere 
one row and two columns, 
Lor a total of two cells. 


<div id=“main’> <div id=“sidebar’> 


This is the Pad 


first and 


only row. 


aa Notice again that the 
table expands and shifts 
to atcommodate different 
widths and heights, and our 
columns are even. That’s what 
we want for Starbuzz! 


In each Cell, we can place a 
block element. We can use 
the existing <div>s in the 
Starbuzz. page as the ells. 
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12 ktml5 markup 


We're the first 


on the block to move up to 
HTML5...the salesman told us 


it was more refined and shinier 
than HTML4.01. 


iy =a 


So, we’re sure you’ve heard the hype around HTMLS. Ana, 
given how far along you are in this book, you’re probably wondering if you made the 
right purchase. Now, one thing to be clear about, up front, is that everything you've 
learned in this book has been HTML, and more specifically has met the HTML5 
standard. But there are some new aspects of HTML markup that were added with 
the HTML5 standard that we haven't covered yet, and that’s what we’re going to do 
in this chapter. Most of these additions are evolutionary, and you’re going to find you 
are quite comfortable with them given all the hard work you've already done in this 
book. There’s some revolutionary stuff too (like video), and we'll talk about that in this 


chapter as well. So, let’s dive in and take a look at these new additions! 
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Rethinking HTML structure 


Before we learn even more markup, let’s step back for a second...we’ve talked a 
lot about structure, but are <div>s really good structure? After all, the browser 
doesn’t really know your <div id="footer"> is a footer, it just knows it is a 
<div>, right? That seems rather unsatisfying, doesn’t it? 


Much of the new HTML5 markup 1s aimed at recognizing how people 
structure their pages with <div>s and providing markup that is more 

specific, and better suited for certain kinds of structure. You see, when the 
browser (or search engines, or screen readers) see id="navigation" in your 
page, they have no idea your <div> is for navigation. It might as well say 
id="goobledygoop". 


So, the standards bodies actually took a look at how <div> elements were 
being used—for headers, navigation, footers, articles, and so on—and they 
added new elements to represent those things. That means with HTML5 we 
can rework our pages a bit and replace our <div>s with elements that more 
specifically identify the kind of content contained in them. 


oe RAIN 

-PQWER 
Think about the way you’ve seen <div>s used. Also, check out a few web pages 
and see how they are using <div>s. Let’s say you wanted to take the most 
common patterns and change the <div>s into real HTML elements. For instance, 
you could change all the <div id="footer"> elements to just <footer> elements. 
Make a list of all the new elements you’d add to HTML. Of course, you won’t 


want to add too many, just enough to cover the most common uses. Also note 
any advantages (or disadvantages) of adding these new elements: 
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+ Cp 


+ 
“whe DOES wHearT? 


Sure, we could just tell you about the new HTML5 elements, but wouldn't it be more fun to figure 
them out? Below, you'll find the new elements to the left (these aren't all the new elements, but 
you'll find the more important ones here); for each element, match it with its description to the right: 


<article> Can contain a date or time or both. 


Contains content meant for navigation 
links in the page. 


Used to add Video media to your page 
<header> 

Content that goes at the bottom of the 

page, or the bottom of a section of the 
<footer> page. 


Contains content that is supplemental to 
<time> the page content, like a callout or sidebar. 


Content that goes at the top of the page, 
<aside> or the top of a section of the page. 


A thematic grouping of content, typically 
<section> with a header and possibly a footer. 


Represents a self-contained composition in 
<video> a page, like a blog post, user forum post, 
or newspaper article. 
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Modern Starbuzz 


Starbuzz Coffee is a modern, hip company, so shouldn’t they be using 
the latest and greatest markup in their pages? Let’s take a look at 
where they might be missing out on opportunities to use HTMLS: 


header element 


structure 


Could we vse 3 
here to make the 


more obvious? 


ic 


Starbuzz. uses a <div> with 
id=“header” for the heading. 


They use a <div> with 
an id=“main” for the 
main, Center Column. 


Here's a <div> with 
an id=“drinks” for 
this left column. 


This content is all 
related; is there a 
better way? 


And the main 
content area is 
made up of a set 
of, well, almost 
articles about 
various aspects of 


ts rete alam . 


en = seer ei fa 


Ti 


We can definitely think 
of that as the main 
content area of the 
page, or maybe we should 
say, 3 main section. 


Here’s a <div> with an 
id=“sidebar” for the 


right column. h 


This really feels like 
secondary content; 
can this be an aside on 
the page? 


One note: for this 
chapter, we've removed 
the award and the 
Coupon so we Can foeus 
on the big—picture 


a structure. 


Starbuzz. 
Here's a <div> with id=“footer” 
for the footer. That one seems 
pretty obvious since we have a 
footer element. 
548 Chapter 12 


www.it-ebooks.info 


html5 markup 


Using everything you know so far about the new HTML5 elements, see if you can 
Exercise rework the Starbuzz page to make use of them. Go ahead and just mark out and 
° scribble on this page. 


<div id=“header’> 


<div id=“drinks”> <div id=“main’> <div id=“sidebar’> 


<div id=“footer’> 


(4 We're not showing the super—detailed structure of the page, 
so for now just foeus on this large—grained structure. 
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; Using everything you know so far about the new HTML5 elements, see if you can 
152 rework the Starbuzz page to make use of them. Go ahead and just mark out and 
Lution scribble on this page. 


We can use the <header> element for our 


header <div>; that’s pretty straight forward! 


<header> 7- 


<section id=“drinks’> 


<section id=“main’> <aside> 


The sidebar is really 
peripheral content; we 
can place that in an 
aside element, given 
that’s exactly what 


6 the <aside> is for. 
Each of these 


“seetions” groups 


together a set. of 


related content; 
that’s just what the 


<settion> element 


is for. 


<footer> 


And we can use the <footer> 
element for our footer. 
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html5 


Update your Starbuzz HTML 


Let’s go ahead and add these new elements to your Starbuzz HTML, starting with the <header>, 
<footer>, and <aside> elements. We’ll come back and look at the <section> element in a bit, but 
for now you can just leave the drinks and main content <div>s as they are. Go ahead and open up the 
Starbuzz “index.html” file and make the following changes: 


@ = Add the <header> element 


Start by replacing the <div id="header"> with a <header> element. Like this: 


iy —ideuy jer 
<header> 
<img id="headerLogo" 


Remove the <div> tags and replace 
<— them with <header> tags. 


src="images/headerLogo.gif" alt="Starbuzz Coffee logo image"> 
<img id="headerSlogan" 

src="images/headerSlogan.gif" alt="Providing all the..."> 
</header> 
</div> 


© Add the <footer> element 


Do the same for the <div id="footer">, only replace it with a <footer> element: 


eyes +i 
<footer> 
&copy; 2012, Starbuzz Coffee 
<br> 


All trademarks and registered trademarks appearing on 
this site are the property of their respective owners. 

</footer> 

<div> 

© _ Change the sidebar to an <aside> 
Now let’s change the “sidebar” <div> to an <aside> element: 
dey—ide"sicebar” 
<aside> 


<p class="beanheading"> 
<img src="images/bag.gif" alt="Bean Machine bag"> 


</p> 


mee <_ We decided to save a few trees (or bits) by abbreviating the 
_ content a little; just make sure you keep all the original content in 
apes the page and change the <div> tags to <aside> tags. 
</aside> 
</div> 
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test driving sections and aside 


 — 


on 2 sa ——a 


Test driving the new ride ste 


We've got a bit more to rework, but doesn’t your 
HTML already feel somehow newer, cleaner, more 
modern? Go ahead and do a test drive by loading 
your page in your browser. 


oo 


Uh oh...looks like 
things didn’t 


work so well. 


What happened? You had 
me all talked into this 
HTML5 stuff. That page 
doesn't look so good. 


No worries; we just got ahead of ourselves. The 
page doesn’t look right because we changed the 
HTML, but we never reworked the CSS. Think 
about it like this: we had a bunch of <div>s 
with ids that the CSS was relying on and some 
of those <div>s aren’t there anymore. So, we 
need to rewrite the CSS to target the new 
elements instead of those old <div>s. Let’s do 
that now. 
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Before you continue... 


Older browsers do not support 
the new elements in HTML5 
you'll be using in this chapter. 


ch it! The elements we ‘re using in this chapter 
are new to HTMLS5 and aren't well 


Mobile browsers in Smartphones, like Android and 


IPh 


one, support these new elements, so if your 


Primary audience target is mobile users, you're good 
to go! 


Check nttp:/caniuse.com/#search=new%20elements 


for 


updates on browser Support of the elements in this 


chapter. 
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styling the new elements 


How to update your CSS for the new elements 


Let’s update the CSS to reflect our new elements. Don’t worry; we’ve already got all 
the basics correct in the CSS file. All we need to do is change the selectors a bit: 


body { 
background-color: #b5a789; 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: small; 
margin: Opx; 
} | First, remove the # mark from the header rules. 
Sasa Weve going from targeting a <div> with an id of 
background-color: #675607: ‘header’ to an element named header. 
margin: 10px 10px Opx 10px; 
height: 108px; a 
} 
#header—img#headerStogan—t 


header img#headerSlogan { 


float: right; Saving some trees...just imagine the 


} — vest of the CSS here. 
Here we need to change this from targeting an 
#sidebar—t a element. with an id of “sidebar” to an aside element. 
aside { 
display: table-cell; 
background: #efe5d0 url (images/background.gif) bottom right; 
font-size: 1053; 
padding: 15px; 
vertical-align: top; 
} 
#footer—t iu Finally, we need to 
footer { select the footer 
background-color: #675cC47; element. 
color: #efe5d0; 
text-align: center; 
padding: 15px; 
margin: Opx 10px 10px 10px; 
font-size: 90%; 
} 


Test drive #7 eos Ahh...much better. 


All right, that’s all we need to do; let’s give it another try, and this 
time you should see the page is back to normal. In fact, it should 
look exactly like it did before we add the HTML5 markup. 
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ig BRAIN 
PAWER 


htmI5 markup 


What's the point of adding the new HTML5 markup if it has no visual effect on the page? 


Fireside Chats 


i; ig Tonight’s talk: HTMLS and HTML4.01 mix it up 


HTMLS 


Ah, my old pal, HTML4.01. You had a good run, 
but now I’m here. 


Tm just getting started. 


Sure, people are beginning to use them. Remember, 
they aren’t going to change the world, they just 
make explicit what web developers have been doing 
all along. 


Tm thinking more about <div> here... 


Tm not talking about getting rid of <div>. Yeah, 
he’s great for grouping content together for styling 
and stuff, but what if you want to, say, identify 
some content as an article on your page? Or break 
your page into sections? 


HTML4.01 


A good run? Take a look at the Web; it is still a sea 
of HTML4.01. 


Yeah? And how are those new elements going? I 
haven’t seen many of them out there. 


How is <p> not explicit? Hello? That’s a paragraph. 
Can’t get more explicit than that. 


There’s nothing wrong with <div>. Leave him 
alone. 


You know as well as I do that everyone is confused 
about how to use those elements, and you can do 
both those things with a <div>. 
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HTMLS 


Yes, you can do it with a <div>, but with, say, an 
<article> element, the browser, search engines, 
screen readers, and your fellow web developers all 
know for sure that’s an article. 


Remember, we use the right element for the job, 
right? That way we can communicate the most 
explict structure we can, and all our tools can do 
the right thing. 


See, that is just exactly where you are wrong. Take 
the <aside> element, which is for marking up 
supplementary content on a page. Now ona 
mobile phone with limited screen space, if the 
browser knows that content is an <aside>, you 
might see that content pushed to the bottom so that 
you see more important content first. If the content 
is in <div> instead, then any number of things can 
happen depending on where in the HTML file the 


content is. 


Now the browser can know the difference between 
the main content in the page and an <aside>. So 
it can treat the content in the <aside> differently. 
For instance, a search engine might prioritize the 
main content in the page over the content in an 
<aside>. 


No, no, this applies to all the new HTML markup: 


header, footer, sections, articles, time, and so on. 
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So? It still looks the same. 


Right thing? Like what? Display it exactly the 
same? 


I still don’t see what the big deal is. 


Great, so with HTML5 we know how to deal with 
asides. 


Well, I think it is about time you take that footer of 


CENS CENSORED 


KR Note to editor: they got out of NA 
hand—tan we get them back to 
vedo the end of the chat? 
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The HTML without the 
<section> element + 


<div id="tableContainer"> 
<div id="tableRow"> 
<div id="drinks"> 
</div> 
<div id="main"> 


</div> 


html5 | 


You've already replaced the “header”, “footer", and “sidebar’ 
<div>s with the <header>, <footer>, and <aside> elements. Now 
you need to replace the “drinks” and “main” <div>s with <section> 
elements and also update your CSS. Leave all the table-display 
<div>s in place for now; we still need those to keep the page laid 
out correctly. 


Go ahead and stratch out the HTML and 
Va CSS below and write in what you need for 
adding the <settion> element. 


<aside> 
</aside> 
</div> <!-- tableRow --> 
</div> <!-- tableContainer --> 


The CSS as it is now Loy 
#dvinks and #main. vy? 


#drinks { 
display: table-cell; 
background-color: #efe5d0; 
width: 20%; 
padding: 15px; 


vertical-align: top; 


#main { 
display: table-cell; 
background: #efe5d0 


url (images/background.gif) top left; 


105%; 
15px; 


font-size: 
padding: 
vertical-align: top; 


ORS AYO 


‘PQawee 


Do you stil] need the ids for 
these sections? If So, why? 
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fix the style of the sections 


Solution You've already replaced the “header”, “footer”, and “sidebar” 
<div>s with the <header>, <footer>, and <aside> elements. Now 
you need to replace the “drinks” and “main” <div>s with <section> 
elements and also update your CSS. Leave all the table-display 
<div>s in place for now; we still need those to keep the page laid 
out correctly. 


Here’s our solution: 
The HTML with the 
<section> element vy 


<div id="tableContainer"> 


<div id="tableRow"> All we did was replace 
<section id="drinks"> edives with <settion>s 
for “drinks” and “main’ 
</section> 
<section id="main"> We left the ids there 
we because we need to be 
</section> able to uniquely identify 
nas each <settion> to style it- 
</aside> 
</div> <!-- tableRow --> 
</div> <!-- tableContainer --> 


The CSS updated for 
the two sections 


section#drinks { cx. We ¢ 
e to 


uld have left the CSS And here's the page! Looks 


display: table-cell; ) 
ae cas ipaiees #ute6dos exactly as it was! Because we are exattly the same, but don’t 
etaeni ap using ids, the same two elements you feel better knowing 

- : would have been targeted with you've got new HTML9 
padding: 15px ; the existing rules. We went ahead elements in place? 


vertical-align: top; 


and added the tag, name in front 
of the id selector just to make it 
clear we're using <section>s here. 

section#main { 


display: table-cell; 

background: #efe5d0 url (images/background.gif) top left; 
font-size: 105%; 

padding: 15px; 


vertical-align: top; 
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Hey, I'm starting a blog. Can 
we use any of these new HTML5 
elements to build it? I want to make 
sure I'm using the latest and greatest 
stuff...it's going to be super popular, just 
like our coffee. 


Interesting you should ask, because many of the 
new HTML5 elements are perfect for creating 
a blog. Before we get into the actual markup, 
though, let’s think about what a blog might look 
like, making sure we keep it consistent with the 
current Starbuzz design. To do that, we’ll create 
a new page with the same “drinks” <section> 
on the left, and the same <aside> on the right, 
and all we'll change is the content in the middle 
to be the blog. Let’s check it out: 


"a a ‘ Here’s what the finished 
blog page will look like. 


T <—_——§_We've got a nite navigation 


menu below the header... 


And the main content 
area now has several blog, 


posts in it. 


anet = 
The vest of the page 


is the Same. 


4 


in 
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Your job is to choose the elements you think will work the best for the new blog. Fill in the 
blanks in the diagram below to show which elements you would choose. Note that each blog 
post will have a heading and at least one paragraph of text. 


Choose your elements from the list below: 


<header> <aside> 
<footer> <section> 
<article> <div> 
<nav> <hl> 
<time> <p> 


The new blog page. [t’s like the 
he ie oe the de 


section is now blog posts and 


we have a navigation menu. > <section < 
aside> 
below the header. id=“drinks”> 


(eee nn. bo ny 
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Your job is to choose the elements you think will work the best for the new blog. Fill in the 
—. blanks in the diagram below to show which elements you would choose. Note that each blog 
: ise post will have a heading and at least one paragraph of text. 


ae 
Lution Choose your elements from the list below: 


<header> <aside> 
<footer> <section> 
<article> <div> 
<nav> <hl> 

The new blog page. |+’s like the <time> <p> 


home page, except the middle 
section is now blog posts and NY 


we have a navigation menu 
below the header. <header> 


We used the <nav> element 


for the navigation menu. 4 
3 <section <settion id= “blog”> <aside> 
id=“drinks”> 


We put the blog “section” 
of the page in a <settion> 
element because <section> 
is used to Qroup related 
content together. 


We put each blog post in 
its own <article> element 
because each blog post is a 
self-contained item (that 
is, you could take articles 
away without affecting the 
readability of the ones You 
left behind). 


<footer> 
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Building the Starbuzz blog page 


From the previous exercise, you know that we’re using a <section> element for the blog section (in 

the middle column) and an <article> element for each blog post. Let’s get started doing that, and 
we'll come back to navigation in a bit. We’ve already created the “blog.html” file for you by making a 
copy of the file “index.html”, and replacing the “main” <section> with a “blog” <section>. You 

can get the complete “blog-html” from the code downloads for the book; here’s part of it: 


We're using a <settion> element for the 


<section id="blog"> —<—— dale eclumn, just like we did for “main” in 


<article> Lhe index.html file. 
<hl>Starbuzz meets social media</hl> We're only showing 


<p> Lo part of each blog 


post here 
Here at Starbuzz we're embracing the social media craze. In fact, 
we're going further than any of our competitors and we're very close... 


</p> 

<p> 

Sound like science fiction? It's not; I'm already testing our final 
prototype social network cup as I write this... 

</p> 

<p> 

So, keep your eyes out for this amazing new cup. And I'll be 


releasing a video teaser soon to tell you all about this new invention, 
straight from Starbuzz Coffee. 


</p> 
</article> 
<article> 


<h1l>Starbuzz uses computer science</h1> 


eps 2— Each blog post gets its own 
<article> element. 
</p> 
</article> 
<article> 


<h1l>Most unique patron of the month</h1> 


iil And within each <artile>, we use <hl> for 
| 


sat the heading, and <p> for the paragraphs of 
</p> 4 text. Pretty “— But ont meaningful 
</article> than a bunch ot <div>s, rights 


</section> 


Get the full blog post text from the “blog-html” file you 
downloaded from wickedlysmart.com. 
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Setting up the CSS for the blog page 


You might have noticed that both the “index.html” file and the “blog.html” file 
link to the same CSS file, “starbuzz.css”. Let’s take a quick look at “blog. html”: 


<!DOCTYPE htm1> Here's the link to the CSS. 
<html> 


<head> and while we've here, 90 ahead and 
<meta charset="utf£-8"> update the title of the page. 


<title>Starbuzz Coffee - Blog</title> 
<link rel="stylesheet" type="text/css" href="starbuzz.css"> 
</head> 


Now, we haven’t yet added any CSS to target our new section with an id of 
“blog”, so let’s do that now. We know we want the “blog” <section> to be 
styled exactly like the “main” <section> on the home page, so we can just 
reuse the same rule by adding the rule for the blog section to the existing rule 
for the main section, like this: 


We tan use the same rule for both <settion> elements by using 
—_ the two selectors separated by a comma. This says, apply all 


section#mai ni aaa ( these properties to both of the selected elements. 
display: table-cell; 
background: #efe5d0 url(images/background.gif) top left; 
font-size: 105%; 
padding: 15px; ies 


: though the two elements, the “main” <section> and 
the blog” <seetion>, are on two different pages, this 
will work because both pages link to the same C&S File. 


vertical-align: top; 


That’s it! All the other styling we need for the “blog” <section> of the page is 
already in the CSS, and we’re not adding any special styling for <article>. So 
it’s time to... 
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testing article 


Test drive the 


blog page «= 


With the creation of a new blog 
page, and those quick tweaks 

to the page (that is, adding the 
<section> and <article> 
elements), let’s save the page 
and load it in the browser. 


As you tan see, elements like <settion>, <article>, 


| 

| = 
and <aside> have a similar default style to <div>; Rese . Ta 
that is, not much! But they do add information | =. 
about the meaning of the content in your page- | Hn cg pd et vem 


What's the difference 
between a section and an 
article? 


Yes, it can be confusing. We'll tell you right up front 
that there is no crystal-clear answer to this; in fact, there are 
many ways to use <article> and <section>. But here is 

a general way to think about them: use <section> to group 
together related content, and use <article> to enclose a self- 
contained piece of content like a news article, a blog post, or a 
short report. 


In the Starbuzz page, each column contains related content, 
so we've treated each column as a section of the page. We’ve 
also taken the individual blog posts and made those articles 
because they are self-contained (you could even imagine taking 
one and reposting it on another site or blog). 


Your mileage may vary, but in general, stick to grouping 
related content together with <section>, and for self- 
contained content, use <article>. And if you need to group 
content together that doesn’t feel as related, you always have 
<div> to fall back on. 
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We still need to add a 


date to the blog... ——_— 


Did you notice in our blog design that we 

added a date to every blog post? Before “Ls 8/12/2018 
HTML5, dates were created in an ad hoc 
way—you might have just added the date 
without marking it up at all, or used a <span> 
or even a <p> to mark it up. But now, we 

have an element that’s perfect for the job: the 
<time> element. 


A two-minute guide to the <time> element 


Let’s take a closer look at the <time> element. It has an important 
attribute, datetime, and the element's kind of picky about the values you 
use in this attribute, so it’s worth going over some of the details. 


If you've using the datetime attribute to specify a date 
and/or a time, then You can write whatever You want as 
the content for the element. Most often, that will be 

“is dat Gees Secs cee 4 some date- or time—related text, like “February 18, 2012” 
tic ant bt Aenea eal or even “yesterday” or “now”. 


written using, the of ficial Internet 
date/time format. x ‘> 
<time datetime="2012-02-18">2/18/2012</time> 


This is the official Internet format st 
for specifying dates with a day, 
month, and year- 


2012-02 4— You can specify just a year and month, 


or even just a year. 
2012 


Here are some other ways to jer 20re-O2-18 09:00 ae You tan add on a time, in 
express dates and times using 2012-02-18 18:00 24-hour format. 
the official format. 

05:00 <— You can specify just a time. 


If You use a “2” after 
the date and time, then it 


means UTC time. (UTC = 6MT) 


2012-02-18 05:00Z2 <— 
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Adding the <time> element to your blog 
Edit your “blog. html” file, and add the following dates below each article heading: 
<article> 


<hl>Starbuzz meets social media</h1> 
<time datetime="2012-03-12">3/12/2012</time> 


“ Below each heading, we've 
added a <time> element. 


enkanned The content of the time element is the 
<article> date of the blog post (written American 
<hl>Starbuzz uses computer science</h1> th th 4y, first). You could also 
<time datetime="2012-03-10">3/10/2012</time> style, with the mon A 
write March 10, 2O12 it you want. 


</article> 


et We've using the datetime attribute 
<h1i>Most unique patron of the month</h1> al Piecokuesclemenk te specify ihe 


<ti ime="2012-02-18">2/18/2 i 
SSNS AES Cea COA ee ERE eS Oe precise date using the official Internet 


date/time format for dates. 


</article> 


ES fea; oe 
. 


Test drive the blog 


Test drive the blog again, and you should 
see the date of the blog post show up 


underneath each blog post heading, <7 aesened 


mama 

Giver: ee 

Now we have | et pee ter ee ecg br 
a date below 


each blog 
posting. 


tpi, ed 
wet Sal meet ee a | 
Sets = 


re eee tame, 


Sa ee A ley 

ll er ‘rel a 
Dae Sale eta eens 
Mn calaey pee ody a a, 

wim | 
Say peed memoe pieced fe | 
: re sa =a! 
So eit 


aris Seen eet 
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It seems like semantically each 
article has its own little header, with 
a heading and date. I assume we could 
even add things like a byline with the 
author's name and location. Is that the 
right way to be using article? 


It sure is. Again, think of an article as a self- 
contained piece of content—something you could 
even take out and syndicate to another web page 
somewhere. And if you did that, you’d definitely 
want to add something like a byline with who wrote 
| it, when, and maybe where. 


We can take this even further, because the <header> 
element isn’t meant just for your main header; you 


= can use it whenever you want to group together 
° items into a header. For instance, you can add the 


<header> element to an <article>,a<section>, 


ie 


or even an <aside>. 


To see how this works, let’s go back and add some 
more <header> elements to the Starbuzz articles. 


Note that the footer ean be used 
within sections, articles, and asides 
as well. We're not going to do that 
on Starbuzz, but many sites do 
treate headers and footers for 
these elements. 
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How to add more <header> elements 


Adding <header> elements is straightforward. Within each 
<article> element, we’ll place a <header> to contain the 
heading and time. To do that, find the <article> elements 
within the blog section and add an opening and closing 
<header> tag to each one 


Plate your <header> element here, around 


<section id="blog"> 
lements. 
<article> 4 the heading and the time elements 
<header> 


<h1>Starbuzz meets social media</h1> 
<time datetime="2012-03-12">3/12/2012</time> 
</header> 
<p>. ..</p> 
</article> 


<article> 
<header> 
<hl>Starbuzz uses computer science</h1> 
<time datetime="2012-03-10">3/10/2012</time> 
</header> 
<p>. ..</p> 


</article> Make sure you add a <header> to 


each article in the blog section. 


<article> 
<header> y, 
<hl>Most unique patron of the month</h1> 
<time datetime="2012-02-18">2/18/2012</time> 
</header> 
<p>. ..</p> 
</article> 
</section> 


‘ WAIN 


Feel free to add an author byline to the header as well. Hmm, there isn’t an <author> element. 


Any idea how you might mark up an author byline? 
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Testing the header st=3= 


Go ahead and add the <header> elements to the VS ned 
Starbuzz blog and give it a test run. 


Hmm, did you notice when You loaded 
the page that the headers of the 
articles don't look right? The 
formatting is all off now... 


QUA 


Now that we’ve added the <header> elements, the spacing 
and formatting is off; did you notice we’ve got way too much 
space below the article heading and below the date, and the 
background color is all wrong? Any idea why? Write your 
ideas about why this might be happening below. 


Hint: take a look at your CSS and see 
if there are ary other <header> vules 
that might be affecting the new article 
headers You just added. 
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So, what’s wrong with the 
header anyway? 


Clearly, we’ve messed up the formatting a bit by 
adding the <header> elements. Why? Let’s take 
another look at the “starbuzz.css” file and check 
out the rule for the <header> element: 


header { 
background-color: #675c47; 
margin: 10px 10px Opx 10px; 
height: 108px; 
} [= PPSSI [2 PSs ip ae og ee 


ae ee a 


Ee se Be eb eels pee 


This header rule height Property causes the 
background color to be set and space to be added to 


ALL headers in the page, not just the main header. SSeS STRESSES 
And the margin isn’t helping either. monet 


IN 


We can fix this by creating a class just for the 


<header> at the top of the page. We might have The rule for styling the header works 
several <header> elements in sections and articles great for the main header but looks 
throughout the site, and in our case, for Starbuzz terrible for the headers in the articles. 


Coffee, the <header> at the top of the page will 
always be treated differently from these other headers 
because it has a special graphical look. So, first find 
the top <header> element in your “blog.html” file 
and add a class named “top” to the element: 


Add the class “top” to the first 
<body> <header> element in the page- 
<header class="top"> 
<img id="headerLogo" 
src="images/headerLogo.gif" alt="Starbuzz Coffee header logo image"> 
<img id="headerSlogan" 
src="images/headerSlogan.gif" alt="Starbuzz Coffee header slogan image"> 
</header> 


Add the “top” class to the top <header> in your “index.html” file, too. 
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Once you've added the “top” class to both your “blog. html” and “index.html” 
files, then all you have to do is update your CSS to use the class in the selector 
in the rules for the header: 


We've added the -top lass selector 


header.top { L to the header rule in the CSS. 


background-color: #675c47; 


margin: 10px 10px Opx 10px; 
height: 108px; 
} 
b-—— We added it to this rule too—while we don’t need to for 
header.top img#headerSlogan { the selector to work correctly, it does make it more clear 
float: right; in the CSS exactly which headerSlogan we're selecting. Just 
} a little best-practice work. 


A. final test drive for the headers 


Once you’ve made all the changes to your Sa 


“blog html”, “index.html”, and “starbuzz.css” 
files, reload the blog page. 


Notice that now the <header> rules apply 
only to the <header> at the very top of the 
page, which is just what we want. Meanwhile, 
the article <header>s get the default style, 
which will work fine as well. 


q 
Now the headers in the vie 
ave formatted correctly! 
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Dumb Questions 


Q: We are doing a lot of work to add 
elements to the page, and it looks exactly 
the same as it did before! Tell me again 
what all this is getting me? 


A: We've replaced a few elements and 
added a few elements, and in the process, 
we've added a lot of meaning to our 

pages. The browser, search engines, and 
applications for building web pages, can—if 
they want—be a lot smarter about how they 
handle different parts of your page. And 
your page is easier for you, and other web 
developers, to read. Even though your page 
looks the same, it’s a lot more meaningful 
under the covers. 


Q: What's the difference between a 
<section> and an <article> again? They 
seem similar to me. 


Head First: Hey <div>, we heard you’ve been feeling 


really down lately. What’s up? 


<div>: In case you haven’t noticed, I’m being made 


A: It is easy to get confused about which 
element to use, so we’re glad you asked. 
The <section> element is more generic than 
<article>, but it’s not as generic as <div>. For 
instance, if you’re just adding an element so 
you can style the page, then use a <div>. If 
you're adding an element to mark up content 
that forms a well-defined section of related 
content, then use <section>. And if you 

have some content that can be reused or 
distributed independently from the rest of the 
content on the page, then use <article>. 


Q: Should every <section> and every 
<article> always have a <header>? 


A: Most of the time, your <section>s and 
<article>s will have a <header>, or at least a 
heading (like <h1>). Think about it: content 
within an <article> element can be reused 

elsewhere, so chances are, that content will 


A quick interview with <div> 


<div>’s feeling a bit left out... 


need a header for descriptive or introduction 
purposes. Likewise, content with a <section> 
element is a group of related content in your 
page, so it will typically have some kind 

of header to separate and introduce that 
section of content. 


Q: Should we use <header> only when 
we’ve got more than one thing to put in 
it? What if we’ve only got one heading 
and nothing else? 


A: You can use <header> even if you 
have only one heading to put in it. The 
<header> element provides extra semantic 
meaning that separates the header of a 
page, a section, or an article from the rest 
of the content. However, it’s not required 
that you always put your heading content in 
a <header> element (that is, the page will 
validate if you don’t). 


come along that are simply for creating generic structure. 


Head First: Right! All these other new elements are 


specifically for adding semantic meaning to pages, and 


mostly redundant! They’re replacing me all over the place 


with these new elements, <section>, <nav>, <aside>... 


Head First: Hey, Element-up; after all, I still see you 
in Starbuzz handling the “tableContainer” and the 
“tableRow”. 


<div>: They haven’t gotten rid of me completely yet, 
but if they keep inventing new elements, 1t won’t be long 
before it’s game over, man. 


Head First: The last time I looked, you were still in the 
HTML specification. Web developers have all sorts of 
special needs for adding structure to their pages and the 
standards guys (and gals) have no interest in inventing 
zillions of new elements. 


<div>: That’s true, and I haven’t seen any new elements 
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you’re much more general purpose. You’re what everyone 
falls back on when they need table layout, for instance. 


<div>: That’s so true! 


Head First: If you ask us, you were way overworked 
before these new elements came along...isn’t it time you 
start enjoying your reduced workload? 


<div>: You know, you make a good point. Maybe I 
should close down shop for a while and see the world; 
after all, I racked up a lot of frequent flyer mileage flying 
around the Internet. 


Head First: Hold on now, you can’t just disappear; most 
of the Web is relying on you... 


Head First: Hello? <div>? 
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Being a forward-thinking 
CEO, I feel better knowing we're 
making the page as semantically sound 
as we can. But don't we need some 
navigation? How do I get from the home 
page to the blog? And back? 


We agree! Having multiple pages isn’t going 
to do us much good if readers can’t navigate —o - 
between them. aecneaeeeen - 


And to create navigation for these pages, we’re going to use 
some of the tools we already know about; namely, a list and 
some anchor tags. Let’s see how that works. 


First, create a set of links for our navigation: 


<a href="index.html1">HOME</a> 
<a href="blog.htm1">BLOG</a> 
<a href="">INVENTIONS</a> 

; <a href="">RECIPES</a> 
<a href="">LOCATIONS</a> 


We've leaving these three links blank because we won't be adding 
these pages, but you should feel free to create these pages! 


Now, wrap up those anchors in an unordered list so we can 
treat them as a group of items. We haven’t done this before, 
but watch how this works, and see how lists are perfect for 
navigation items: 


Notiee that each link is now an item in an 
unordered list. This may not look much like 
navigation, but it will when we apply some style. 


<ul> 
<li><a href="index.html1">HOME</a></1i> 
<li class="selected"><a href="blog.htm1">BLOG</a></1i> 
<li><a href="">INVENTIONS</a></1i> 
<li><a href="">RECIPES</a></1i> 
<li><a href="">LOCATIONS</a></1i> 


</ul> Notite also that we are identifying one item as 


the selected one, by using a Class. 
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Completing the navigation 


Now place the navigation right into your HTML. Do that by 
inserting it just below the header in the “blog. html” file: 


<body> 
<header class="top"> 
<img id="headerLogo" 


src="images/headerLogo.gif" alt="Starbuzz Coffee header logo image"> 


<img id="headerSlogan" 


src="images/headerSlogan.gif" alt="Providing all the caffeine..."> 
</header> 
<ul> 
<li><a href="index.html">HOME</a></1i> 
<li class="selected"><a href="blog.html">BLOG</a></1i> 
<li><a href="">INVENTIONS</a></1i> 
<li><a href="">RECIPES</a></1i> 
<li><a href="">LOCATIONS</a></1i> 
</ul> 
</body> 


Adding the navigation CSS 


Make sure and add this CSS to the 


anything like “navigation.” So, before you try it, let’s add some CSS: 


starbuzzess file. 
You can try that HTML if you want, but you won’t be satisfied that it o4 BOTTOM of your 


ul { 
background-color: #efe5d0; 
margin: 10px 10px Opx 10px; 
list-style-type: none; 
padding: 5px Opx 5px Opx; 


} 
ul li { 

display: inline; 

padding: 5px 10px 5px 10px; 
} 


ul 1i a:link, ul 1i a:visited { 
color: #954b4b; 
border-bottom: none; 
font-weight: bold; 

} 

ul li.selected { 
background-color: #c8b99c; 
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“~~ We've adding a background color, and some margins and padding. 


Notice that the bottom margin is O because the table display 
already has a |Opx border—spacing at the top. 


Also notice that we've removed the bullets from the list items. 


Here, we're changing the display of each list item from “block” 
to “inline”, so now the list items won't have a carriage return 
before and after; they'll all flow into one line on the page like 
regular inline elements do. 


We want the links in the navigation list to look a bit different from 
the vest of the links in the page, so we override the other rules for <a> 
(above this rule in the CSS) with a rule that sets properties for both 
the links and the visited state of the links (so they look the same). 


And Finally, we're setting the background of the <li> element 
with the ¢lass “selected” so the navigation item Corresponding 
to the page we're on looks different from the rest. 
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Poo 


Who needs ¢PS? Giving 
the navigation a test drive 


Let’s give this a try. Go ahead and get the 
CSS typed into the bottom of your CSS file, y, 


and then load it in your browser. 


Hey, not bad for a first try. We’ve got a nice 
navigation bar that even has the page we’re 
on—the blog page—highlighted. 


But...can we take this even further? After all, 
youre in the “modern HTML?” chapter and 
we haven’t used a new element from HTML5 
for the navigation yet. As you’ve probably 
guessed, we can improve this by adding a 
<nav> element to the HTML file. Doing so 
will give everyone (browser, search engines, 
screen readers, your fellow web developers) 

a bit more information about what this list 
really is... 


Adding a <nav> element... 


As you already know, there is a <nav> element, and using 
it is as simple as wrapping your navigation list with <nav> 
opening and closing tags, like this: 


Here’s the <nav> starting tag, and we're enclosing 


—_ the entire navigation list within a <nav> element. 


<nav> 
<ul> 
<li><a href="index.html">HOME</a></1i> 
<li class="selected"><a href="blog.htm1">BLOG</a></1i> 
<li><a href="">INVENTIONS</a></1i> 
<li><a href="">RECIPES</a></1i> 
<li><a href="">LOCATIONS</a></1i> 
</ul> 
</nav> 
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Before we do any more 
testing, we really need to 
talk about your CSS. 


We should really talk about best practices. You see, right now your CSS assumes that 
every unordered list is a navigational menu. So, what happens when the Starbuzz CEO 
needs to add a list of new cafes he’s going to open in the blog? Disaster—he’ll probably 
get a navigation list right in the middle of his blog because it will be styled just like the 
navigation list we just added to the page. 


But no worries; to fix this potential problem, we just need to be more specific about 
targeting the navigation list items, and that’s not hard because the only navigation list 
items we want to target are the ones contained within a <nav> element. 


iE RAIN 
TPQaweEeeR 


Before moving on, think through how you’d change the CSS to 
specifically target the navigation items, and no other unordered lists. 
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Making our CSS more specific... 


Okay, let’s use the fact that we have a <nav> element in the HTML and make the 
selectors more specific. That way, we ensure that future changes to the HTML 
(such as adding a innocent <ul> element to somewhere else in the page down the 
road), don’t result in any unexpected styling. Here’s how we do that...but notice that 
we do have to make a few adjustments to the margins of the <nav> element so it 
behaves correctly. 


nav { _——_ We've added a new rule for the <nav> element, and moved the 
background-color: #efe5d0; properties for setting the background color and margin into this rule, 
ry cacting doses aera Grae Fleer so everything in the <nav> element gets styled with these properties. 

} 

nav ul { J find we've added a Property to set the margin of the <ul> 
margin: Opx; element to O, so it fits snugly within the <nav> element (by 
list-style-type: none; default, <ul> elements have a margin that will cause the <ul> 
padding: 5px Opx 5px Opx; to be shifted over a bit if we don't set it to O). 

} 

nav ul li 
Sane inline; = Finally, for ALL these rules, we've added the 
padding: 5px 10px 5px 10px; v_ selector “nav” in front of them so the rules affect 

} ONLY <ul> elements that appear within a <nav> 

nav ul 1i a:link, nav ul 1i a:visited { clement. That ag eae be sure that if ane , 

: ; CEO adds a <ul> to his blog in the future, it won't 

Cates: gonababe a get styled like a navigation list! 
border-bottom: none; Notice, we adde d “nav? 
font-weight: bold; to both vules in this 

} rule with two selectors! ee 


nav ul li.selected { 
background-color: #c8b99c; 


Ta-da! Look at that navigation! 


Get these changes into the CSS and give it a try. Not 
bad, huh? And now we can rest assured that any future 
<ul> elements won’t be affected by the navigation CSS. 
Remember, when possible, add the most specific rule 
you can to style your elements. 
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Hey, if I could get you guys to stop geeking 
out over your new HTML5 elements for a minute, I've 
got some great news: we've just finished creating our new 
Tweet Sip cups. It's a revolutionary new technology: take 

a sip of coffee and have your status updated on Twitter. I 
just did a new video demonstrating it working! Can we get 
it on the blog!? 


Here’s the Starbuzz blog 


page, complete with all our 
recent improvements... 


Be 
And he wants to put a we 


video right in the page, 
just like this... 


Oh, and this Tweet Sip technology is so 
earth-shatteringly useful, he wants us 
to assume we're under a “friend-DA”... 
we told him you'd be good with that. 
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Now we're going to have to add 
video to the Starbuzz page. It 
doesn't seem like a big deal, but 
aren't we going to need a Flash 
developer? 


Jim: Well, we used to need Flash for 
video, but with HTML5 we now have a 
<video> element we can use. 


7 Frank: Wait, isn’t Flash still better? It’s been 


around a long time. 


Jim: I could see some short-term arguments for that on the 
desktop, but what are you going to do on certain mobile 
devices that don’t support Flash? Think of how many 
mobile users Starbuzz has; some of those customers are 
going to be in the dark if we use Flash. 


Frank: Got it. So how do we go about using an element 
to do video? 


Jim: Think of video like the <img> element; we supply 
a src attribute that references the video, which 1s placed 
in the page at the location of the <video> element. 


Frank: That sounds easy enough. This is going to be a 
piece of cake. 


( y Jim: Well, let’s not promise anything too quickly. Like most 
Jim Frank media types, video can get complicated, especially when it comes 
to dealing with the encodings for video. 


Frank: Encodings? 


Jim: The format used to encode the video and the audio of a video clip. 


Frank: That’s a big deal? 


Jim: It is because the browser makers haven’t agreed on a common standard 
for video encodings. But let’s come back to all that. For now, let’s get a 
<video> element in our page and see what all we can do with it. 


Frank: Sounds good; lead the way! 
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Creating the new blog entry 


Let’s get started by adding a new blog entry, which in HTML-speak, should 
be a new <article> element. Go ahead and add this HTML just under the 
<section> element, above the other articles: 


ees L~ Add this in the “blog” <seetion> at the top... 


<header> 
<hl>Starbuzz launches..Tweet Sip</h1> 
<time datetime="2012-05-03">5/3/2012</time> 

</header> 

<p> 
As promised, today I'm proud to announce that Starbuzz 
Coffee is launching the Tweet Sip cup, a special Starbuzz 
Coffee cup that tweets each time you take a sip! Check 
out my video of our new invention. 

</p> 


</article> We're going to add the video right here, 


below the paragraph in the blog entry. 


And now, introducing the <video> element 


At first blush, the <video> element really is similar to the <img> element. In the 
chapter downloads, you'll find a file named “tweetsip.mp4” in the “video” folder. 
Make sure the “video” folder is at the same level as your “blog. html” file. Then add 


this markup to your page right below the closing </p> tag and before the closing 
</article> tag: 


We'll come back to the details of all these attributes in a see, 
Here we have the opening 


‘L but for now notice we're setting the width and height of the 
video rows quite 3 ‘a element, along with specifying a sre URL for the video. 
Sew at: ributes... 


) V . 


<video controls autoplay width="512" height="288" src="video/tweetsip.mp4"> 


</video> ~—_ 


N We'll see what content we can place in here in a bit as well... 


And here we have the closing tag. 
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Lights, camera, action... 


Get this new markup in and give it a try! Hopefully you'll see what we do 
here, but if you don’t, keep reading—you’ll soon know how to fix tt. 


shee é 


Seat ie he here Be ee 


Sone a ee ere 


Here’s our video embedded in the 
page right where we put it with the 
correct width and height. 

9) —— 


Did you notice the video started 

i 1s because we 
autoplaying? That's petause 
supplied an “autoplay ey 
Just remove it, and the user wl 
have to click play to see the video. 


Also notice there’s a set of controls for playing, 


ausina, Controlli 
on. These are supplied if you place a “tontrols” a i eee ames ie 


ttribute in Your <video> element. 


Not bad for a couple lines of markup, huh? But don’t rest too easy 


(especially if you aren’t seeing video yet); we still have a lot to learn 
about the <video> element. Let’s get started... 
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By the time you 

read this, these 

formats could 

be more widely 
supported across 

all browsers. So i 
our video's working, 
great. Always cheek 
the Web to see 

the latest on this 
unfolding, topic. And 
well come back for 
more on this topic 
shortly. 
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I'm not seeing any video. I've 
triple-checked the code and 
I have the video in the right 
folder. Any ideas? 


Yes, it’s probably the video format. 


While the browser makers have agreed on what the 
<video> element and API look like in HTMLS, not 
everyone can agree on the actual format of the video files 
themselves. For instance, if you are on Safari, H.264 


format 1s favored; if you’re on Chrome, WebM is favored; 
and so on. 


In the code we just wrote, we’re assuming H.264 as a 
format, which works in Safari, Mobile Safari, and IE9+. 
If you’re using another browser, then look in your “video” 
folder and you'll see three different types of video, with 
three different file extensions: .mp4, .ogv, and .webm 
(we'll talk more about what these mean in a bit). 


For Safari, you should already be using .mp4 (which 
contains H.264). 


For Google Chrome, use the .webm format by replacing 
your src attribute with: 


src="video/tweetsip.webm" 


If you’re using Firefox or Opera, then replace your src 
attribute with: 


src="video/tweetsip.ogv" 


Give this a try to 
get you Going; we're 
Coming back to all 
this in a bit. 


And if you’re using IE8 or earlier, you’re out of luck— 
wait a sec; this is Chapter 12! How could you still be using 
IE8 or earlier? Upgrade! But if you need to know how to 
supply fallback content for your IE8 users, hang on; we’re 
getting to that. 
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How does the <video> element work? 


At this point, you’ve got a video up and playing on your page, but before we move 
on, let’s step back and look at the <video> element and its attributes: 


Notice that the controls and 
autoplay attributes are a little 
different from other attributes 


) They are “Boolean 
If present, the controls attribute causes the : aaleaeaaireN far. They 


i attributes” that have no value. So, 
player to supply controls for controlling the t. ne ma ee nate 


( widen iaritianai? pajoath: then the video tontrols will show up- 
: h 
The autoplay attribute causes the video prep aeanrs o 
‘ to start playback upon page load. video controls don't show uP: 
<video controls 


ete The width and height of the 
: prey ” . = i KX video in the page 
width="512" height="288 
src="video/tweetsip.mp4" EX The soure loeation of the video 
poster="images/poster.png" 
id="video"> 
Lj eidaes hK_ |f you like, you éan supply an 
optional poster image to show when 
the movie is not Playing. 
OF course, we Can add an id to the 
element too in case we want to 
apply some styling. 


A little Webville good video 
etiquette: the autoplay attribute 


While autoplay may be the best thing for sites like YouTube 
and Vimeo (or WebvilleTV, for that matter), think twice 
before setting it in your <video> element. Often, users want 
to participate in the decision of whether or not video is 
played when they load your page. 
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Closely inspecting the video attributes... 


Let’s look more closely at some of the more important 
video attributes: 


sre 


The src attribute is Just like the <img> element’s 

src—it is a URL that tells the video element where 

to find the source file. In this case, the source is 
“video/tweetsip.mp4”, (If you downloaded the code 


for this chapter, you'll find this video and two others 
| in the “video” directory). 


catttrals 
The controls attribute isa 
Boolean attribute. It’s either 
there or it’s not. If it is there, then 
the browser will add its built-in 
controls to the video display. ‘The 
controls vary by browser, © check 
out each browser to see what they 
look like. Here’s what they look 
like in Safari. 


si-.,is what video 
File is used here. 


preload 

The attribute preload is typically used for 

fine-grained control over how video loads 

for optimization purposes. Most of the time, 

the browser chooses how much video to load, 

based on things like whether autoplay is set 
and the user’s bandwidth. You can override 

) this by setting preload to “none” (none 

of the video is downloaded until the user 

“plays” it), “metadata” (the video metadata is 

downloaded, but no video content), or “auto” 

to let the browser make the decision. 


autoplay fies video player 


The autoplay Boolean attribute tells the 
browser to start playing the video as soon 
as it has enough data. For the videos we’re 


demoing with, you’ll probably see them start 
to play almost immediately, 


width, height 


The width and height attributes set the width and height of the 
video display area (also known as the “viewport”). If you specify a 
poster, the poster image will be scaled to the width and height you 
specify. The video will also be scaled, but will maintain its aspect 
ratio (c.g., 4:3 or 16:9), so if there’s extra room on the sides, or the 
top and bottom, the video will be letter-boxed or pillar-boxed to 
fit into the display area size. You should try to match the native 
dimensions of the video if you want the best performance (so the 
browser doesn’t have to scale in real time) 


poster 
The browser will typically display one frame of 
the video as a “poster” image to represent the 
video. If you remove the autoplay attribute, 
you'll see this image displayed before you click 
play. It’s up to the browser to pick which frame 
to show; often, the browser will just show the 
first frame of the video...which is often black. If 
you want to show a specific image, then it’s up 
to you to create an image to display, and specify 
it by using the poster attribute. 


loop 
Another Boolean attribute, loop automatically 
restarts the video after it finishes playing. 


Pillar—boxing » Cc Letter—boxing 
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I was testing on different 
browsers, and the controls look 
different on each one. At least 
with solutions like Flash, I had 
consistent-looking controls. 
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Yes, the controls in each 
browser are different with HTML 
video. 


The look and feel of your controls is 
dictated by those who implement the 
browsers. They do tend to look different in 
different browsers and operating systems. In 
some cases, for instance, on a tablet, they 
have to look and behave differently because 
the device just works differently (and it’s a 
good thing that’s already taken care of for 
you). That said, we understand; across, say, 
desktop browsers, it would be nice to have 
consistent controls, but that isn’t a formal 
part of the HT'ML5 spec, and in some cases, 
a method that works on one OS might clash 
with another OS’s user interface guidelines. 
So, just know that the controls may differ, 
and if you really feel motivated, you can 
implement custom controls for your apps. 


£ We do this in Head First 
HTML Programming, Come join 
us there; JavaSeript is fun! 
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What you need to know about 
video formats 


We wish everything were as neat and tidy as the 
<video> element and its attributes, but as it turns out, 
video formats are a bit of a mess on the Web. What’s 

a video format? Think about it this way: a video file 
contains two parts, a video part and an audio part, and 
each part is encoded (to reduce size and to allow it to be 
played back more efficiently) using a specific encoding 
type. That encoding, for the most part, is what no one 
can agree on—some browser makers are enamored with 
H.264 encodings, others really like VP8, and yet others 
like the open source alternative, Theora. And to make 
all this even more complicated, the file that holds the video 
and audio encoding (which is known as a container) has 
its own format with its own name. So we’re really talking 
buzzword soup here. 


Anyway, while it might be a big, happy world if all 
browser makers agreed on a single format to use across 
the Web, well, that just doesn’t seem to be in the cards 
for a number of technical, political, and philosophical 
reasons. But rather than open that debate here, we’re 
just going to make sure you’re reasonably educated on 
the topic so you can make your own decisions about 
how to support your audience. 


Let’s take a look at the popular encodings out there; 
right now, there are three contenders trying to rule the 
(Web) world... 
Your mileage may vary by the time 
you vead this book, as favored 


entodings tend to change over time. 


H.264 Video : 
| Encoding | Ogg Container 
Theora Video | 
AAC Audio Encoding _§ 


There ave three different 
video formats in use 
atross the major browsers. 


l This is a container... 


WebM Container athe: 
contains a 
video and 

Vp8 Video — an audio 
Encading _¥ encoding of 
= the video 
data. 


Vorbis Audio 


MP4 Container 


Encoding 


Vorbis Audio 
Encoding 


Each format consists ofa 
container type (like WebM, 
MP4, and O99) and a video and 
audio encoding (like VP@ and 
Vorbis). 


The HTMLS specification allows for any video format. 


It is the browser implementation that determines what 


formats are actually supported. 
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The video format contenders 


The reality is, if you’re going to be serving content to a wide spectrum of users, 
you're going to have to supply more than one format. On the other hand, if all 
you care about is, say, the Apple iPad, you may be able to get away with just one. 
Today we have three main contenders—let’s have a look at them: 


MP4 container with 


164 vid d AAC audi WebM container with 
H.264 video an © audio VP8 video and Vorbis audio 


H.264 is licensed by the MPEG-LA 


group. WebM was designed by Google to 


work with VP8-encoded videos. 


WebWM/VP8 is supported by Firefox, 
Chrome, and Opera. 


You'll find WebM-formatted videos 
with the .webm extension. 


There is more than one kind of 
H.264; each is known as a “profile.” 


MP4/H.264 is supported by Safari 
and IE9+. You may find support in 
some versions of Chrome. 


Ogg container with 
Theora video and Vorbis audio 


Theora is an open source codec. 264 is the 

Video encoded with Theora is industry darling, Sica athe ee. 
usually contained in an Ogg file, but not the oe 
with the .ogv file extension. reigning — «© sane aneneeN 


Ogg/Theora is supported by 
Firefox, Chrome, and Opera. 


VP@, the contender, 
is backed by Google, 
supported by others, and 


Coming on strong... 
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support for 


TOP SECRET 


Go OUT DETERMINE 
eee THE CURRENT LEVEL OF SUPPORT FOR VIDEO IN EACH BROWSER 
BELOW (HINT, HERE ARE A FEW SITES THAT KEEP TH SUCH THINGS : 


uP WI 
nttp://en wikipedia. org/wiki / HTMLS5 video ; a 
netp:// caniuse .com/ ysearch=video) | ASSUME THE LATEST VERSION OF THE 
BROWSER .- FOR EACH BROWSER/ FEATURE put A CHECKMARK IF IT Is SUPPORTED - 
UPON YOUR RETURN, REPORT BACK FOR YOUR NEXT ASSIGNMENT! 

iOS and Android devices (amond, others) 


v 


Mobile WebKit 


Theora 
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How to juggle all those formats... 


So we know it’s a messy world with respect to video format, but what to do? Depending 
on your audience, you may decide to provide just one format of your video, or several. In 
either case, you can use one <source> element (not to be confused with the src attribute) 
per format inside a <video> element to provide a set of videos, each with its own format, 
and let the browser pick the first one it supports. Like this: 


Notice we're removing, the sre 


and adding three <source> taas each with i 
. fl ; 
attribute from the <video> tas... own sr¢ attribute, each with anit of 4 


( video in a different format. 


<video controls autoplay |width="512" height="288" 
sre="video/tweetsip-mp44> 


<source src="video/tweetsip.mp4"> 
<source src="video/tweetsip.webm"> 
<source src="video/tweetsip.ogv"> 


<p>Sorry, your browser doesn't support the video element</p> 
</video> 


This is what the top and 
tarts at the toP 
whens pean eae until it finds 3 


doesn't support video. Lormat it Can play. 1 
ormat | 


For each source, the browser loads the 

metadata of the video file to see if it f j a) 

tan play it (which can be a lengthy process, I ie 
although we Can make it easier on the 


browser...see the next page). 


— POINTS 


The container is the file format that’s used to package up the video, audio, 
and metadata information. Common container formats include: MP4, 
WebM, Ogg, and Flash Video. 


The codec is the software used to encode and decode a specific encoding 


of video or audio. Popular web codecs include: H.264, VP8, Theora, AAC, 
and Vorbis. 


The browser decides what video it can decode. Not all browser makers 
agree, so if you want to support everyone, you need multiple encodings. 
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Take Z: lights, camera, action... 


Okay, if you were having trouble seeing video, add the 
markup on the previous page, and even if you weren’t 
having trouble, add it anyway. Give the video another try. 
Try it in a few different browsers, as well. 


Now the video should be 


working cross—browser! —» 


How to be even more specific with 
your video formats 


Telling the browser the location of your source files gives it a selection of 
different versions to choose from; however, the browser has to do some 
detective work before it can truly determine if a file is playable. You can help 
your browser even more by giving it more information about the MIME type 
and (optionally) codecs of your video files: 


The ¢odees parameter specifies 
which éodets were used for encoding 
the video and audio to create the 


The file You use in the sre is a 
container for the attual video (and 


The video codet 


audio and some metadata). \ entoded video file. The audio cadet 
<source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"'> 
" : c 
type is an optional attrib 
: aa . : : i ute This is the MIME type Notice the double quotes on the codecs 
help it Figure cob if ib coe lay, of Bae video Fle It Parameter. This means we need to use single 
this kind e tile ened specifies the container quotes around the type attribute. 


format. 


Next, you'll update your <source> elements to include the type information for 
all three types of video we have. 
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Update and test drive sts 


Update your <source> elements like below, and give your page a test drive: 


<video controls autoplay width="512" height="288" > 
<source src="video/tweetsip.mp4" type='video/mp4; codecs="avcl1.42E01E, mp4a.40.2"'> 
<source src="video/tweetsip.webm" type='video/webm; codecs="vp8, vorbis"'> 
<source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"'> 


<p>Sorry, your browser doesn't support the video element</p> 


</video> q 


If you don't know the todets parameters, then You 
tan leave them off and just use the MIME type. 
It will be a little less efficient, but most of the 


time, that’s okay. 


The codecs for mp4 are more complicated than the other two because 


h.264 supports various “profiles,” different encodings for different 
uses (like high bandwidth vs. low bandwidth). So, to get those right, 
you'll need to know more details about how Your video was encoded. 


Most likely, your video will play as before, but you’ll know that behind the scenes you’re 
helping the browser with the additional type and codec information. If and when you do 
your own video encoding, you’ll need to know more about the various options for the type 
parameters to use in your source element. You can get a lot more information on type 


parameters at http: //wiki.whatwg.org/wiki/Video type parameters. 


Q: Is there any hope of getting to one 
container format or codec type in the 
next few years? Isn’t this why we have 
standards? 


A: There probably won't be one encoding 
to rule them all anytime soon—as we said 
earlier, this topic intersects with a whole host 
of issues, including companies wanting to 
control their own destiny in the video space 
to a complex set of intellectual property 
issues. The HTML5 standards committee 
recognized this and decided not to specify 
the video format in the HTML5 specification. 
So, while in principle HTML5 supports (or is 
at least agnostic to) all of these formats, it 

is really up to the browser makers to decide 
what they do and don’t support. 


Keep an eye on this topic if video is 
important to you; it will surely be an 
interesting one to watch over the next few 


there are no a 
Dumb Questions 


years as this is all sorted out. And, as always, 
keep in mind what your audience needs and 
make sure you're doing what you can to 
support them. 


Q: If | want to encode my own video, 
where do | start? 


A: There are a variety of video capture 
and encoding programs out there, and which 
one you choose is really going to depend 

on what kind of video you're capturing and 
how you want to use the end result. Entire 
books have been written on video encoding, 
so be prepared to enter a world of all new 
acronyms and technology. You can start 
simple with programs like iMovie or Adobe 
Premiere Elements, which include the ability 
to encode your video for the Web. If you're 
getting into serious video work with Final 
Cut Pro or Adobe Premiere, these software 
programs include their own production tools. 
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And, finally, if you are delivering your videos 
from a content delivery network (CDN), 
many CDN companies also offer encoding 
services. So you've got a wide variety of 
choices depending on your needs. 


Q: Can | play my video back 
fullscreen? 


A: That functionality hasn't yet been 
standardized, although you'll find ways to do 
it with some of the browsers if you search 
the Web. Some of the browsers supply a 
fullscreen control (for instance, on tablets) 
that give the video element this capability. 
Also note that once you've got a way to go 
fullscreen, what you can do with the video, 
other than basic playback, may be limited 
for security reasons (just as it is with plug-in 
video solutions today). 
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falling back to flash video 


I think Flash video is still 
important, and I want to 
make sure I have a fallback 
if my users’ browsers don't 
support HTMLD5 video. 


No problem. 


There are techniques for falling back to another 
video player if your preferred one (whether that 
be HTML5 or Flash or another) isn’t supported. 


Below, you'll find an example of how to insert 
your Flash video as a fallback for HT'ML5 video, 
assuming the browser doesn’t know how to play 
HTMLS5 video. Obviously, this is an area that 

is changing fast, so please take a look on the 
Web (which is updated a lot more often than a 
book) to make sure you’re using the latest and 
greatest techniques. You'll also find ways to make 
HTMLS5 the fallback rather than Flash if you 
prefer to give Flash video priority. 


<video poster="video.jpg" controls> 
<source src="video.mp4"> 
<source src="video.webm"> 
<source src="video.ogv"> 
<object>. ..</object> 
</video> 


A For Flash video, you need an <object> element. 
Insert the <object> element inside the 
<video> element below the <source> tags. If 
the browser doesn't know about the <video> 
element, the <object> will be used, and you'll 
see Flash video playing, 
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I just wanted to say nice job! The site is totally new and 
improved, and now we can do video anytime we need to. 
Umm, about that Tweet Sip cup...well, if you watched the 
video, then I guess you know we're back to the drawing 
board. But don't worry—we're already working on a new 
coffee mug with social networking, gamification, digital 
scrapbooking, auto-checkin, and analytics built right in! 
This one is going to be a winner, I promise! 


Would you believe 
Started with video? 


ees hes far beyond the Scope of this 
SS you want to 

1,400-page book), so ele 

after you've finished 

this book, Pick up 


Head First H TML5 
Programming (by 

your all-time favorite MW 
Head First authors, E. 

of course), and take apse a 


this all to the next 
level. 


you are here > 


www.it-ebooks.info 


593 


a taste of other new elements 


E 
_ 


Use this element for 
content that’s aside from 
the main content, like a 
sidebar or a pullauote. 


G <aside> 


This element is for highlighting 
bits of text. Almost as good as 
that ink highlighter! 


Q gpat¥? 


=_ 
Use this for including aud; os 


sound content in 
Your page. 


The time element is a time, 
a date, or a date—time (like 
January 2st at Zam). 
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Thi es and anv _ 
y, (_ a "yavaseragt 1m You" P29 y 
w 


<progress> : 

tion? 
See Use this element to define 
the major sections of your 


dotument. 


Need to show progress 
on a task? Like 70% 
done? Use this element. 


Use this for sections with 
headers, or the header of 
the whole document. 


<footer> Sheader> 
(Gi This element defines the 

facker of a setion or 3 

whole document. Want a video in your page? 
You need this element. 


Co <Smetery ede” 
Need be display 2 measurement in g 
range? Like a thermometer that goes Use this element to 


from O to 212, and shows it’s 90 


deavece eutsider Hot group together links 


that are used for 
“cnav7 navigation in Your site. 
a For marking, up content like 
;cle> articles or blog posts 
<artt that ave self—contained 


content. 
sells This element is to define self— 


contained content like a photo, a 
diagram or even a Code listing, 


Here are a bunch of elements you 


know, and a few you don’t, that 
are all new in HTMLS. 


Remember, half the fun of HTML 
is experimenting! So make 
some files of your own and try 
these out. 
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html5 


el POINTS 


HTML5 added several new elements to 
HTML. 


= <section>, <article>, <aside>, <nav>, 
<header>, and <footer> are all new 
elements to help you structure your page, 
and add more meaning than if you use 
<div>. 


= ~<section> is for grouping related content. 


= © <article> is for self-contained content 
like blog posts, forum posts, and news 
articles. 


= <aside> is for content that is not central 
to the main content of the page, such as 
callouts and sidebars. 


™ ~=<nav> is for grouping site navigation links. 


m™ <header> groups content such as 
headings, logos, and bylines that typically 
go at the top of a page or section. 


= <footer> groups content such as 
document information, legalese, and 
copyright that typically go at the bottom of 
a page or section. 


= <time> is also a new element in HTMLS. It 
is used to mark up times and dates. 


<div> is still used for structure. It is often 
used to group elements together for 
styling purposes or to create structure for 
content that doesn’t fit into one of the new 
structure-related elements in HTML5. 


Older browsers don’t support new HTML5 
elements, so be sure you know the 
browsers your primary audience will be 
using to access your web page, and don’t 
use the new elements until you’re sure 
they will work for your audience. 


<video> is a new HTML element for 
adding video to your page. 


A video codec is the encoding used to 
create the video file. Popular codecs 
include h.264, Vp8, and Theora. 


A video container file contains video, 
audio, and metadata. Popular container 
formats include MP4, OGG, and WebM. 


Provide multiple video source files to be 
sure your audience can view your video 
files in their browsers. 
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is your left brain 


HTMLcross 


There are lots of new ideas and new elements in this chapter. Do the crossword 


to help make it all stick. All the answers come from the chapter. 


4 5 
¥ 6 
10 11 
12 
13 
14 
Across 
3.A attribute is one that doesn’t have a specified 
value. 


6. The TweetSip cup measures coffee in 
7. The design of the Starbuzz page has a main content 


8. Specify a date in the attribute of the <time> 
element. 

11. The in the Starbuzz blog had the wrong style 
until we added the “top” class. 


12. A browser doesn’t know that <div id=“footer’> means 


13. Use selectors in your CSS to make sure you 
don’t get unintended styling. 

14. The <section> element is used to group 

content. 
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Down 


1. The Starbuzz CEO made a video about the 

cup. 

2. Browser makers can’t agree on video 

4. Asection can have a header and a ‘ 

5. You'd probably use this element for a sidebar. 

9. Your local newspaper might use this kind of element to 
mark up its news articles. 

10. The tag is used for specifying multiple video files. 
11. You can use a at the top of the page, or at the 
top of a section or article. 
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htmI5 mi 
. + + , 
WH OSES WHAT? 
S$ovu?rTiaw 
Sure, we could just tell you about the new HTML5 elements, but wouldn't it be more fun to figure 


them out? Below, you'll find the new elements to the left (these aren't all the new elements, but 
you'll find the more important ones here); for each element, match it with its description to the right: 


Can contain a date or time or both. 


<article> 


Contains content meant for navigation links in 
the page. 


Used to add video media to your page. 


<header> 
Content that goes at the bottom of the page, or 
the bottom of a section of the page. 
<footer> 
Contains content that is supplemental to the 
page content, like a callout or sidebar. 
<time> 
Content that goes at the top of the page, or the 
top of a section of the page. 
<aside> 
A thematic grouping of content, typically 
with a header and possibly a footer. 
<section> 5 reer 
Represents a self-contained composition in 
a page, like a blog post, user forum post, or 
évideo> newspaper article. 
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exercise 


TORoREHON 


pee THE CURRENT LEVEL OF SUPPORT FOR VIDEO IN EACH BROWSER 
A FEW SITES THAT KEEP UP WITH SUCH THINGS : 

UME THE LATEST VERSION OF THE 

tr iT 15 SUPPORTED - 
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Ks HTMLeross Solution 


Kai 
ae stite 


'S HEADERS 
BOUNo 
oo 
Srecrere 
RELATED 
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13 tables and more lists 
am * 
* Getting Tabular » 


7 —— — 


If it walks like a table and talks like a table... There comes a time 
in life when we have to deal with the dreaded tabular data. Whether you need to 
create a page representing your company’s inventory over the last year or a catalog 
of your vinylmation collection (don’t worry, we won’t tell), you know you need to do 

it in HTML, but how? Well, have we got a deal for you: order now, and in a single 
chapter we'll reveal the secrets that will allow you to put your very own data right 
inside HTML tables. But there’s more: with every order we'll throw in our exclusive 
guide to styling HTML tables. And, if you act now, as a special bonus, we'll throw in 


our guide to styling HTML lists. Don’t hesitate; call now! 


this is a new chapter 601 
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something new from tony 


Hey guys, I just created this 
little table of the cities in my journal. 
I was going to put it on the website, but 

T couldn't find a good way to do it with 
headings or blockquotes or paragraphs. 
Can you help? 


City Date Temperature «Altitude Population Diner Rating 
Walla Walla, WA June 15 t 12044 29, 666 4/5 
Magje City, ID June 25 vhs 53l2 ft 50 3/5 
Bountiful, UT July 10 al 4226 ft © 41,173 4/5 
Last Chanee,CO July 23 102 4,180 ft 265 3/5 
COU Mees NM Pugs) a 4242 ft 7,289 «9/8 
August 18 1o4 660 ft 480 3/5 


Why, AZ 
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How do you make tables with HTML? 


Tony’s right; you really haven’t seen a good way of using HTML to represent 

his table data, at least not yet. You do know there’s a way to use CSS and 

<div>s to create a table-like layout (with CSS table display), but that’s for layout 
(presentation) purposes, and isn’t related to the content itself. Here, we’ve got 
tabular data that we want to mark up with HTML. Luckily, HTML has a <table> 
element to take care of marking up tabular data. Before we dive into the <table> 
element, let’s first get an idea of what goes into a table: 


And this row 
We have Columns... has headings. 


F Diner 
93 : 
l 


Truth or August 7th 4,242 ft 5/5 
Consequences, 


August 18th 860 ft 480 3/5 


We call each piece of data a Cell, 
or sometimes just table data. 


BRAIN 
‘PQWER 
If they put you in charge of HTML, how would you design one or more 


elements that could be used to specify a table, including headings, rows, 
columns, and the actual table data? 
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an html table 


Creating a table with HTML 


Before we pull out Tony’s site and start making changes, let’s get the table 
working like we want it in a separate HTML file. We’ve started the table and 
already entered the headings and the first three rows of the table into an HTML 
file called “table.html” in the “chapter13/journal/” folder. Check it out: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
td, th {border: 1px solid black;} fe is just a small bit of CSS 


</style> so we Can see the structure of 

<title>Testing Tony's Travels</title> the table in the browser. Don’t 
</head> worry about this for now. 
<body> 


<table> > We use a <table> tag to start the table. 
<tr> 


Here's the first row, which we start with a <tr>. 
<th>City</th> <i —___ 


<th>Date</th> a 
Bee parce th> <—— Each <th> element is a table heading meen 
<th>Altitude</th> Notice that the table headings are listed one 
<th>Population</th> < "——_ after each other. While these look like they 

Each <tr> <th>Diner Rating</th> might make up a column in the HTML, me are 

element forms </tr> actually defining the entire table headings row. 

a table row. SEES Look back at Tony’s list to see how his headings 


<td>Walla Walla, — map to these. 
<td>June 15th</td> 
Here's the start of the second row, which is 


Binet had For the city Walla Wall 
<td>1,204 £t</td> oy eee) enetnaua 
<td>29, 686</td> S ™ Each <td> element holds one cell of the 
<td>4/5</td> table, and each cell makes a separate Column. 
</tr> a 
<tr> All these <td>s make up one row. 


<td>Magic City, ID</td> 


<td>June 25th</td> 
<td>74</td> 


<td>5,312 f£t</td> And here’s the third 
<td>50</td> row. Again, the <td> 
<td>3/5</td> elements each hold one 
</tr> piece of table data. 
</table> 
</body> 
</html> 
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What the browser creates 


Let’s take a look at how the browser displays this HTML table. We’ll warn you now: 
this isn’t going to be the best-looking table, but it wll look like a table. We’ll worry 
about how it looks shortly; for now, let’s make sure you’ve got the basics down. 


Testing Tony's Travels 
is: ie + — = ‘Tilec /fehapter 13 jjaumnaireabbe hom ie = 


re Perna Adee eee Res 
ra Wan WA ame Se 
api Cay 1D [hee 258] 
We've got three rows total, LZ see — 
including the headings... Pah, Soe 
xj J fA its own Cell... 
and six Columns, just eer i 
h eted. and each <th> is in a Ce 
a as well. [t looks like the 
browser displays headings 
in bold by default. 


Here’s how the browser —~, fe 


displays the table HTML. 


Finishing typing in the “Testing Tony’s Table” HTML from the previous page (we started 
it in “table.html”, but you need to finish it). Typing this in, while tedious, will help get the 
structure of the <table>, <tr>, <th>, and <td> tags in your head. When you finish, give it 
a quick test, and then add the remaining items from Tony’s table. Test that too. 
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Tables dissected 


You’ve seen four elements used to create a 
single table: <table>, <tr>, <th>, and <td>. Let’s 
take a closer look at each one to see exactly 
what role it plays in the table. 


The <th> element contains one cell in the heading of 
The <table> ta starts the whole thing your table. iL wish be weide @ babe wow 
off. When you want a table, start here. 


v, The </tr> tag ends 
_.<th>Date</th> a row of the table. 


c ‘ : Diner 
| Gey | dae [temp | ateade | ropetation | Rune | 
Walla Walla, WA | June 15th 1,204 fi 29,686 ae 
Magic ity, ID__ | June 25th 5,312 f i? 


Bountiful, UT July 10th 4,226 fi 41,173 ates 
Last Chance,CO| July 23rd 1 4,780 fi a bes 


August 9th 4,242 ft 7,289 ieee 
oo e 


Each <tr> element 
specifies a table row. 


a ale dels 2 eines 9th</td> </table> 


that goes in a row is 
nested inside the <tr> The </table> tag 


element. ae 
The <td> element contains one data cell in Your 


table. [+ must be inside a table row. 
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Questions 


pum 


Q: Why isn’t there a table column 
element? That seems pretty important. 


A: The designers of HTML decided to 
let you specify tables by row, rather than 

by column. But notice that by specifying 
each row’s <td> elements, you are implicitly 
specifying each column anyway. 


Q: What happens if | have a row that 
doesn’t have enough elements? In other 
words, I’ve got fewer things than the 
number of columns in the table? 


A: The easiest way to deal with that is to 
just leave the content of the data cell empty; 
in other words, you write <td></td>. If you 
leave out the data cell, then the table won't 
line up properly, so all the data cells have to 
be there, even if they are empty. 


Q: What if | want my table headings to 
be down the left side of the table, instead 
of across the top; can | do that? 


A: Yes, you certainly can. You just need 
to put your table heading elements in each 
row instead of all in the first row. If your <th> 
element is the first item in each row, then the 
first column will consist of all table headings. 


Q: My friend showed me a cool trick 
where he did all his page layout right 
within a table. He didn’t even have to use 
css! 


A: Go straight to CSS jail. Do not pass 
go; do not collect $200. 


Using tables for layout was commonly done 
in the HTML era before CSS, when, frankly, 
there was no better way to do complex 
layouts. However, it is a poor way to do 


your layouts today. Using tables for layout 
is notoriously hard to get right and difficult 
to maintain. Instead, it's much better to 
use CSS table display to get the benefits 
of a table layout without actually creating 
an HTML table (this is how we styled the 
Starbuzz page in Chapter 11). Tell your 
friend that his technique is old school, and 
he needs to get up to speed with the right 
way to do layout: CSS with HTML. 


Q: Isn’t a table all about presentation? 
What happened to presentation versus 
structure? 


A: Not really. With tables, you are 
specifying the relationships between tabular 
data items. We'll use CSS to alter the 
presentation of the table. 


Q: How do HTML tables relate to CSS 
table display? 


A: HTML tables allow you to specify 

the structure of a table using markup while 
CSS table display gives you a way to 
display block-level elements in a table-like 
presentation. Think about it this way, when 
you really need to create tabular data in your 
page, use tables (and we'll see how to style 
these in a bit); however, when you just need 
to make use of a table-like presentation with 
other types of content, then you can use a 
CSS table display layout. 


Q: Can we use CSS table display to 
style HTML tables? 


A: Well, you don’t really need to. Why? 
Because you're already creating a tabular 
structure with HTML, so, as you'll see, 
you can use simple CSS to style the table 
however you like. 
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Tables give you a way 
to specify tabular data 


in your HTML. 


Tables consist of data 
cells within rows. 
Columns are implicitly 


defined within the 


rows. 


The number of 
columns in your table 
will be the number of 
data cells you have in 
a row. 


In general, tables are 
not meant to be used 
for presentation; that’s 


the job of CSS. 
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testing you on fables 


608 


BE the Browser 

On the left, you’]] find the HTML 
for a table. Your job is to play like 
you're the browser displaying the 
table. After you've done 
the exercise, look at the 


<table><tr><th>Artist</th> 
<th>Album</th></tr><tr> 


<td>Enigma</td><td>Le Roi Est Mort, 


Vive Le Roi!</td></tr> <tr><td>LTJ end of the chapter to 
Bukem</td> see sf you got it right. 


<td>Progression Sessions 6</td> 
</tr><tr> 


<td>Timo Maas</td> teve’s vst the 
<td>Pictures</td></tr></table> table HTML- 
Argh! Someone needs to learn 
how to format her HTML. 


suo ta msdn 


Draw the table here: 


— 
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Adding a caption 


You can improve your table right off the bat by adding a caption. 


<table> 
<caption> 


The cities I visited on my 
Segway'n USA travels ) 


SS Ne The caption is displayed in the 
<tr> browser. By default, most browsers 
<th>City</th> display this above the table. 
<th>Date</th> 
<th>Temperature</th> 
<th>Altitude</th> 
eine noe If you don t like the default location of 
aes the caption, you can use CSS to reposition 


it (we'll give that a try in a sec). Keep 

= in mind that older browsers don’t fully 
<td>Walla Walla, WA</td> support repositioning the caption. 
<td>June 15th</td> 


<td>75</td> 
<td>1,204 f£t</td> You should always put the caption at the 
<td>29, 686</td> top of your table in the HTML, and use 
<td>4/5</td> CSS to reposition it to the bottom, if 
</tr> that’s where you want it. 
<tr> 


<td>Magic City, ID</td> 
<td>June 25th</td> 
<td>74</td> 
<td>5,312 ft</td> 
<td>50</td> 
<td>3/5</td> 

</tr> 


Lo The vest of the table 


rows go here. 


</table> 
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checking out the unstyled table 


Test drive...and start thinking about style sis 


Add the caption to your table. Save and reload. 


The caption i is at the top of 
the table. It’ ll Probably i 
better on the bottom. 
- Tony's Table - 
eee [+] Shile:///chaptert3jjournal/taple.nmi = Ale ss fchapterdd journals tale, hire al 


The cities [ visiied on my Seewar'n USA travels 


[Cig] Date — rempersture cna] Poplin) Diner Rating 
[Willa Wala, WA [June isw_|7s____—‘fiaosajavsee (4s | 
= 
August Sth 
ae oo a 


a 


to the table data cells, to make 
them easier to read... 


..and the border lines ave really “heavy” visually. 
We could use much “lighter” borders in the 
table cells, although it would be nice to have a 
dark border around the whole table... 
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We really need to add some ee — Lo a splash of orange to 


match Tony's site could really 
pull the whole thing together. 


tables and 


Before we start styling, let’s get the table 
into Tony’s page 


Before we start adding style to Tony’s new table, we should really get the table 
into his main page. Remember that Tony’s main page already has set a font- 
family, font-size, and other styles that the table is gomg to mherit. So without 
putting the table into his page, we won’t really know what the table looks like. 


Start by opening “journal.html” in the “chapter13/journal” folder, locate the 
August 20th entry, and make the following changes. When you’ve finished, 
move on to the next page before reloading. 


<h2>August 20, 2012</h2> 
<p> 

<img src="images/segway2.jpg" alt="Me and my Segway in New Mexico"> 
</p> 


<p> 

Well, I made it 1200 miles already, and I passed through some interesting 
places on the way: 

</p> 


<oi> 
; ; a, This is the old list 


——<h i >Magie—City;—ED</hi> of tities. Delete this 
—<ti> Bountiful, tr<Abi> because we're replacing 
—<hi>heast Chance; _co<Aii> it with the table. 
—<bi>tTruth—_eorCons Guences;, NM</4i> 

Lisihy, 4 
<fet> 


<table> 
<caption>The cities I visited on my Segway'n USA travels</caption> 
<tr> 
<th>City</th> 
<th>Date</th> 
<th>Temperature</th> 
<th>Altitude</th> 


<th>Population</th> The new table goes here: Copying and pasting it from the 


dia Rating</th> hs File is the easiest way, to get it here. 
</table> 
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Now let’s style the table 


Add the new style highlighted below at the bottom of the “journal.css” 
stylesheet file. 


@font-face { 
font-family: "Emblema One"; 
sre: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff") , 
url ("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.tt£") ; 


} 
body { 
font-family: Verdana, Geneva, Arial, sans-serif; ‘ 
font-size: small ; 
} Ks At the top here is all the style that’s 
hl, h2 { currently in Tony's web page. We 
ealaE: #ec6600; added all this in Chapter 8. We've 
border-bottom: thin dotted #888888; — going to add the new style for the 
} tables below it. 
hl { 
font-family: "Emblema One", sans-serif; 
font-size: 220%; 
} 
h2 { 
font-size: 130%; 
font-weight: normal ; 
} 
blockquote { 
font-style: italic; 
} 


First, we'll style the table. We're going to add a margin on 


table { the left and right, and a thin, black border to the table. 
margin-left: 20px; pC 


Margin-right: 20px; ) : : 
h 
ee ee — rarer pair es 


caption-side: bottom; 


} 

td, th { 
border: thin dotted gray; <——_ | ¢t’s also change the border on the table data cells to be a 
padding: 5px; much lighter, dotted border in gray. 


And let's add some padding to the data cells so there's some 


space between the data content and the border. 


caption { 


font-style: italic; 


, This rule styles the caption. We're changing the 
Hdiacstee aes OS Y P ging, 
eae font-style to italic and adding some top padding, 
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Taking the styled tables for a test drive 


That’s a lot of changes at once. Make sure you save them, and you should 
validate as well. Then load “journal.html” into your browser. 


WEY cise areate isan 5 


cs ce a a) Ries} fehapatur 1] [journal fie wenal Sierd 


The table looks quite 
different now that you've 
styled it. We've also inheriting 


a few styles that were 


Seqgway'n USA 
Dacu mening my Seip rudd fee UG anomy very ceo equal 


already in Tony's journal. Augues 20, 0nd 


All the fonts are now sans—sevit 
and a smaller size. We picked 


vious styles 
that up from the yre e Y all © nite 2 LO Milles dined, oie ] peed Wren ie ret Biotes of Da wey: 


already in the file. 
LE Darayr 
hairs 


chy Date Terperwture ARitude Population 


Now we've got a dark border ——— Witla ‘Walla, WA Sune 15th | 75 1,24 & | Sasa a5 
and dotted lines. NN aytev Ciky, 10 dune 2th | 74 5,212 50 an 
Bouweru, La july 10a a $2 1,174 45 
; : 
And we ve got some mere bid 7 Lau Chtce, CO July fed | Loz ‘Tees 2s 33 
the table and some padding in ; 
Trubh or Ceicguances,  Auguat os Pre Cee 
eath table cell. he 5th cian fal 
oe in Or: 4a 


The citar S wala oy Sew OS nero 


Those dotted lines are looking July 14, 2012 

really busy and distracting, laiw aaete Bueria Shawn abyle ciges an ihe side of che cose teelay: 
though. It doesn’t help that they Een cme , 

are duplicated between each pair rae nae aaa 

of table cells. eee, 


ldotiinety won't ben pase one coed 


i f tion—side 
Remember, in browsers that don't support the cap 
property, the caption will still be at the top of the table. 
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cells and the box model 


614 


This is just like the 

a eae ys 
property we used in 

the CSS table display 
layout for Starbuzz. 


Chapter 13 


Table cells look like they just 
use the box model too...they've 
got padding and a border. Do they 


also have a margin? 


Table cells do have padding and a border—just like 
you’ve seen in the box model—but they are a little 
different when it comes to margins. 

The box model is a good way to think about table cells, but they do 


differ when it comes to margins. Let’s take a look at one of the cells 
in Tony’s table: 


Here’s the content. 


5,312 f% 2b 


nae And here’s the border. 


BEBE MPP 


We call the space in between 


the cells border—spacing, 


So instead of a margin, we have a border-spacing property, which 
is defined over the entire table. In other words, you can’t set the 


“margin” of an individual table cell; rather, you set a common spacing 


around all cells. 
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your pencil 


The double dotted lines are giving Tony’s table a busy and distracting look. 
It would be much better, and wouldn't detract from the table, if we could 
just have one border around each table cell. Can you think of a way to do 
that with styling given what you've just learned? Give it a try and check 
your answer in the back of the chapter. 


7 

cS BEB PPP 

ee //e eB 
rT] ry] 
. 


tome’ foe 


Q: You said border spacing is defined 
for the entire table, so | can’t set a margin 
for an individual table cell? 


A: Right. Table cells don’t have margins; 
what they have is spacing around their 
borders, and this spacing is set for the entire 
table. You can’t control the border spacing of 
each table cell separately. 


a ,a12 ft 


gr no 


Dumb Questions 


Q: Well, is there any way to have 
different border spacing on the vertical 
than I have on the horizontal? That seems 
useful. 


A: You sure can. You can specify your 
border spacing like this: 
border-spacing: 10px 30px; 


That sets 10 pixels of horizontal border 
space and 30 pixels of vertical border space. 
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Q: The border-spacing property 
doesn’t seem to work in my browser. 


A: Are you using an old version of 
Internet Explorer? We're sorry to report that 
IE version 6 doesn’t support border-spacing. 
But seriously, isn’t it time you upgraded your 
browser? 
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dealing with table borders 


Getting those borders to collapse 


There is another way to solve the border dilemma, besides the 
border-spacing property. You can use a CSS property called 
border-collapse to collapse the borders so that there is no border 
spacing at all. When you do this, your browser will ignore any border 
spacing you have set on the table. It will also combine two borders 
that are right next to each other into one border. This “collapses” two 
borders into one. 


Here’s how you can set the border-collapse property. Follow along 
and make this change in your “journal.css” file: 


table { 
margin-left: 20px; 
margin-right: 20px; 
border: thin solid black; Add a border—tollapse property 
caption-side: bottom; and set its value to “collapse”. 
border-collapse: collapse; 


} Kf 


Save the file and reload; then check out the AE ra te neee rvee 
changes in the border. PS ee Px, 
feqwog'm USA 


Tsering en he ard ber oe ag erp oer Seg 


Buguan 23, BZ 


rT: 


o,a12 fT 


aed | ped eg ere eee g pla oe ber ory 


ee ee eee ee 


| mem Mode ne ie Le RS a 


|: ys FS eri Mah | me os 
Mica el, LT way ee mr oe | —a 
La Caren, oo téy Gorn 7m ood aa 
Tee = ia, | perl 

te ™ = = Li] Min 7, Lt] 

iy, a = HH eee | cr 


Now you just have one single border eae 
around all the table cells. Just what Pir ctinn | ening romp Eaceays (FA bree 
we wanted, and don’t you agree that a 

the table looks much cleaner now? 


1 cde a ek a Pa ng ap MP rand Dodd. 


fey Set os eg ee 
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tables and more lists 


You're becoming quite the pro at HTML and CSS, so we don’t mind giving youa 
little more to play with in these exercises. How about this: we'd like to spruce this 
table up even a little more, starting with some text alignment issues. Let's say we 
want the date, temperature, and diner rating to be center-aligned. And how about 
right alignment on the altitude and population? How would you do that? 


Here’s a hint: create two classes, one for center-aligned and one for right-aligned. 
Then just use the text-align property in each. Finally, add the appropriate class to 
the correct <td> elements. 


This may sound tough, but take it step by step; you already know everything you 
need to finish this one. And, of course, you can find the answer in the back of the 
chapter, but give yourself the time to solve it before you peek. 


2 GB iy Te ee ee ee all 


Pe ich | reper ed 


few’ nm Usa 


Thatenhiag fp Oe aia Ua ae TE ey cee gery? 


Auguat 20, #0u2 


| ls Woda, Wk 

| bem ger Cay, ie) 

| Ricard, LIE 

Let: Chesca, Ci fury Dire 


| Trust or Commerce Jpgerr 
I Ea 


| ier 
|= a en 
ee ae 
Daly 74, Pe 
1 ees nee Dhaest cee abe geen ee Le eda at Lie ied Lap 
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fl gas, 
OF aan 
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coloring cells 


How about some color? 


You know Tony loves his signature color and there’s no reason not 
to add a splash of orange to his table; not only will it look great, 
but we can actually improve the readability of the table by adding 
some color. Just like for any other element, all you need to do is 
set the background-color property on a table cell to change its 
color (notice how everything you’ve learned about HTML and 
CSS is starting to come together!). Here’s how you do that: 


th { 
background-color: #cc6600; 
} 


Add this new rule to your “journal.css” file and reload. 


Here’s what you'll see: a 


How about some color in the 
table rows? 


So far, the color is looking pretty nice. Let’s take it to the 
next level. A common way to color tables 1s to give rows an 
alternating color, which allows you to more easily see each 
row without getting confused about which column goes 
with which row. Check it out: 


Difficult to do in CSS? Nope. Here’s how you can do this. 
First define a new class—let’s call it “cellcolor”: 


-cellcolor { 
background-color: #fcba7a; 
} 


and then add this class attribute to each row you'd like 
to color. So in this case, you find the <tr> opening 
tags for Magic City, Last Chance, and Why, and add 
class="cellcolor" to each one. 


Your turn. Add the class “cellcolor” to your 
CSS in “journal.css”, and then, in your 
HTML, add class=“cellcolor” to each of the 
<tr> opening tags needed to make the rows 
alternating colors. Check your answers 
before moving on. 


~ Exercise 
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f ® Some Serjous CS§ 
« 


Want to see another, more advanced way to add color to every other row of a table? It’s called the nth-child 
pseudo-class. Remember, pseudo-classes are used to style elements based on their state (like the a: hover 
pseudo-class we used in Head First Lounge, which styles a link if the user is hovering the mouse over the link). 


For the nth-child pseudo-class, that state is the numerical order of an element in relation to its sibling elements. 
Let's look at an example of what that means: 


Here, we have four paragraphs nested in a <section> 
- element. Each paragraph is a “child” of the <section>. 


<section> 


; — Thic ic the first child. 
<p> 
Aistesitasa 0. 
ae Sern 
and this is the fourth child. 


Let’s say you want to select the even paragraphs (that is, paragraphs 2 and 4) so they have a red 
background color, and the odd paragraphs so they have a green background color. You do that like this: 


p:nth-child(even) { ; 
background-color: red; 4—— Paragraphs 2 and 4 will be ved... 
} 
p:nth-child(odd) { 
background-color: green; <—~ ..and paragraphs | and 3 will be green. 
} 


As you might guess from the name “nth-child”, this pseudo-class is even more flexible 
than just selecting odd and even items nested in an element. You can also specify simple 
expressions that use the number n to give you a wide variety of options in selecting elements. 
For instance, you can also select the even and odd paragraphs like this: 


<section> 


Seleets even— If n=O, then 2n=O (no 


p:nth-child(2n) { numbered <P>s raeh), and 2ntl is |, which 
paragraph/, 
background-color: red; is the first paragraph. V4 
} j————_= Seleets odd— If n=l, then 2n=2, the Steed | 


pinth-child(2n+1) { —— jumbeved <p>s 


background-color: green; i ie al =2, the 


} 
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620 


Complete the CSS rule below using the nth-child pseudo-class 
to color the odd rows light orange. 


Write Your pseudo—Class 
selector here. Y 


tr: { 
background-color: #fcba7a; 
} 


Comment out Your telleolor elass like “7 


/* .cellcolor { 
background-color: #fcba7a; 
} */ 


If you want to try this for real, first comment out your .cellcolor 

class so it doesn’t take effect anymore. Next, place the new 

tr pseudo-class rule above the rule for setting the background Rows |, 3, 5, and 7 all have a light-orange background 
color of the <th> row (so the <th> row stays dark orange). Make tolor. But the rule Lor th will override the rule for 


sure you're using a modern browser (IE9+!), and reload the Ga git if cod k oranae. 
page. Did it work? Go ahead and remove this new rule, and the “odd” rows, so it will stay dark orang 
uncomment the .cellcolor rule before moving on. 


Did we mention that Tony made 
an interesting discovery in Truth 
or Consequences, New Mexico? 


It’s fair to say Tony found something interesting 
about Truth or Consequences, New Mexico; in 
fact, he found fer so interesting that after going to 
Arizona, he turned around and came right back. 


We're glad for Tony, but he’s really given us a 
conundrum with the table. While we could just add 
a new row for Truth or Consequences, we’d really 
like to do it in a more elegant way. What are we 
talking about? Look on the next page to find out. 


Chapter 13 
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City Date Temperature | Alttade Population Diner Rating 
Walla Walla, WA June 1S B / 1204 ft 2.4, bab 4/5 
Magie City, ID June 25 ht Salo ft 50 3/5 
Bountiful, UT July 10 4l 2b ft 41,173 4/5 
Last Chance,CO July 23 1o2 47780 ft 265 3/5 


A242 ft 
HAD ft 


Another look at Tony’s table 


Based on his return trip to New Mexico, Tony’s added a new entry for August 27th, 
just below the original Truth or Consequences entry. He’s also reused a couple of 
cells where the information didn’t change (a great technique for reducing the amount 
of information in a table). You can see that when he added the new row, all he 
needed to do was list the things that were different the second time around (the date, 
the temperature, and that he revisited the diner). 


tse 
| city [ate | temp | atsinde | Poputation | Pine | 


Walla Walla, WA | June 15th} 75] 1,204 ft 29,686] 4/5 | 
Here ave both | Magic City 1D | June 25th| 74 [5,512.8 0 95 
of Tony's visits Bountiful, UT July 10th 4,226 fi 41,173] 4/5 
to Truth oF Last Chance, CO| July 23rd] 102] 4,780 [| sa 


aan Truth or August 9th 93 
Consequences, 
NM August 27th ae 


These table data cells 
But where does this leave you with HTML? It seems like you’d have to add an entirely span TWO rows now. 
new row and just duplicate the city, altitude, and population, right? Well, not so fast. 
We have the technology...using HTML tables, you can have cells span more than 
one row (or more than one column). Let’s see how this works... 
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using tabl« 


How to tell cells to span more than one row 


What does it mean for a cell to span more than one row? Let’s look at the entries 
for Truth or Consequences, NM, in Tony’s table again. The data cells for city, 
altitude, and population span two rows, not one, while the date, temp, and diner 
rating span one row, which is the normal, default behavior for data cells. 


“° City. ID 


| 
: 
93 


August 9th ime 
August 27th [= 


August 18th 104 


Last Chance, CO 


{ruth or 


Consequences, 


NM 


| Why, AZ 


While the date, temp, 
These ¢ells span two rows. and diner rating cells 
take up just one. 


So, how do you do that in HTML? It’s easier than you might think: you use the 
rowspan attribute to specify how many rows a table data cell should take up, and 
then remove the corresponding table data elements from the other rows that the cell 
spans over. Have a look—it’s easier to see than describe: 


IX ™ Here are the two table 
rows that have the New 
Mexito data. 


<tr> 
<td rowspan="2">Truth or Consequences, NM</td> 
<td class="center">August 9th</td> 
<td class="center">93</td> 
<td rowspan="2" class="right">4,242 ft</td> Ke For the data cells that don’t 
<td rowspan="2" class="right">7,289</td> change on the second visit (eity 


<td class="center">5/5</td> 
class="center /5</ The city is not altitude, and population), we add a 


</tr> 
<tr> al needed because rowspan attribute indicating that 
; of the rowspan. the table data sPans two rows. 


<td class="center">August 27th</td> 


<td class="center">98</td> <Z—\ Then in the second row, we 
ee Come with specify just the Columns we need 
—— altitude and (date, temp, and a new rating). 


<td class="center">4/5</td> 


Lyte population 
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4 
* ~~ 
WH _ WH aT? 
= 


Just to make sure you've got this down, fill in each cell in the 
table with the data from the correct <td> table cell. We've 
done one for you to get you started. Check your answers 
before moving on. 


rowspan="2">Truth or Consequences, NM</td> 
<td class="center">August 9th</td> 

<td class="center">93</td> 

<td rowspan="2" class="right">4,242 f£t</td> 
<td rowspan="2" class="right">7 ,289</td> 
class="center">5/5</td> 


class="center">August 27th</td> 
class="center">98</td> 


class="center">4/5</td> 
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testing table spans 


Test drive the table sis 


Make the changes to the table in “journal. 
html” and give it a test run. Take a look at 
the table. Think about exactly what you’re 
doing to the table: you’re using HTML to 
specify that certain cells should take up 

more than one row, and to do that, you’re 
removing the <td>s they’re displacing. 


Now we've got a great-looking 
table that doesn’t have any 
redundant information in it 


and looks good tool 


Q: You said you can have table data 
span columns too? 


A: You sure can. Just add a colspan 
attribute to your <td> element and specify 
the number of columns. Unlike the rowspan, 
when you span columns, you remove table 
data elements that are in the same row 
(since you are spanning columns, not rows). 
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Dumb Questions 


Q: Can | have a colspan and rowspan 
in the same <td>? 


A: You sure can. Just make sure you 
adjust the other <td>s in the table to account 
for both the row and column spans. In 

other words, you'll need to remove the 
corresponding number of <td>s from the 
same row, and from the column. 
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Q: Do you really think these rowspans 
look better? 


A: Well, they certainly reduce the amount 
of information in the table, which is usually a 
good thing. And, if you look at a few tables 
out there in the real world, you'll find that 
rowspans and colspans are quite common, 
so it’s great to be able to do them in HTML. 
But if you liked the table better before, feel 
free to change your HTML and go back to 
the previous version. 


tables and more lists 


Four out of five stars? 
I know my diners, and that 
was a solid five-star rating! 
You better change that in 
the table. 


oe) 


Trouble in paradise? 


It looks like we’ve got a disagreement on the diner rating for August 
27th, and while we could ask Tony and Tess to come to a consensus, why 
should we? We've got tables, and we should be able to get another rating 
in there. But how? We don’t really want to add yet another entry just for 
Tess’s review. Hmmm...why don’t we do it like this? 


| cy | dae [temp | Ateade | ropetation | Rune | 
Walla Walla, WA | June 15th 1,204 fi 29,686 
Magic City, ID__ | June 25th 5,312 f 
Bountiful, UT July 10th 4,226 ft 41,173 
Last Chance, CO| July 23rd 4,780 ft | __#60} s/o 


Truth or August 9th 93 4,249 ft 7 a 

Consequences, 

1m August 27th 4 i 
i 4/5 | 


Why, AZ August 18th{ 104{ 860k} 480] 3/5 


Why not put both their ratings 
in the table? That way, we get 
more aceurate information. 
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adding a nested ta 


Hold on...that looks like a 


table within a table. 


That’s because it is. But nested tables in 
HTML are straightforward. All you need 
to do is put another <table> element 
inside a <td>. How do you do that? You 
create a simple table to represent both 
Tony’s and Tess’s ratings together, and 
when you have that working, put it inside 
the table cell that now holds Tony’s 4/5 
rating, Let’s give it a try... 


<tr> 
<td rowspan="2">Truth or Consequences, NM</td> 
<td class="center">August 9th</td> 
<td class="center">93</td> 
<td rowspan="2" class="right">4,242 £t</td> 
<td rowspan="2" class="right">7,289</td> 
<td class="center">5/5</td> 

</tr> 

<tr> 
<td class="center">August 27th</td> 
<td class="center">98</td> 


<td> 
a = First, delete the old rating 
<tr> that represented Tony's rating... 
<th>Tess</th> 
<td>5/5</td> 
</tr> 
<tr> Sad put a table in its place. This table holds 
<th>Tony</th> two diner ratings: one for Tess and one for 
EE ESE Tony. We're using table headings for their 
z ne names, and data Cells for their ratings. 
</td> 
</tr> 
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Test driving the nested table 


Go ahead and type in the new table. Tables are easy to mistype, 
so make sure you validate and then reload your page. You 
should see the new, nested table. 
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Wow, looking nice. 
Only that background 
really is a bit much 
for a nested table. 
Let's keep the names 
bold, but take off 
the background color. 
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testing what you know about fables 


4) 


Determine the 
selector to select 
only the nested 
table heading 
elements. 
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BRAIN 


It’s time to fall back on all that training you’ve done. What you need to do is 
change the table heading background color for just Tony and Tess, and do 
it without changing the background of the main table headings. How? You 

need to find a selector that selects only the nested table headings. 


Wala Wala, WA | Ave tsi | 1s it 29,0 


Jahy 10th ] 42205 ft 41,173 
| Augean th 


Truth or-Consequecces, NH 4,242 ft 
Hipage PPR 


The cites! winhed! on mr Saegeeap in USA boaads 


We want to change the background tolor of 
the nested table headers to white. 


Stop! Don't look 
at the next page 
until you do this 
exercise. 
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Overriding the CSS for the nested 
table headings 


You can target just the <th> elements in the nested table using 
a descendant selector. Add a new rule to your CSS that uses 
the “table table th” selector to change the background color of 
the nested table headers to white: 


table table th { 
background-color: white; 


} 


Now save the changes to your “journal.css” file and reload. 
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Now the <th> in the 
nested table has a 
white background. 


But notice it still has the bold 
font weight since we didn't 
override that property: 
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thereyareno 
Dumb Questions 


Q: | used a class to solve the Brain 
Barbell. | created a class called “nestedtable” 
and assigned each table heading to it. Then 

| created a rule like this: 


-nestedtable { 
background-color: white; 


} 


Is that an okay solution too? 


A: There are lots of different ways to solve 
problems using CSS, and certainly your 
solution is an effective and perfectly valid way 
to use CSS. We'll just point out that by using 
the descendant selector instead, we didn’t have 
to make any changes to our HTML. What if 
Tony and Tess keep adding reviews for diners? 
Then for every review, you'd have to make 

sure and add the class to each <th>. With our 
solution, the styling happens automatically. 


eSB RAIN 

POWER 
You want Tony and Tess to 
have different background 
colors on their table rows; 
say, blue and pink. Can 


you think of several ways 
to do that? 
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adding a list to tony’s blog 


Giving Tony’s site the final polish 


Tony’s page is really looking nice, but there’s one more area we haven't spent 
any time styling yet: the list that contains the set of items he was preparing for 
his trip. You'll find this list in his June 2nd entry; check it out below: 


_ We've looking at just the HTML 
snippet from the June 2nd entry. 
<h2>June 2, 2012</h2> 


<p> 
<img src="images/segwayl.jpg" 
alt="The first day of the trip" /> 


</p> 
Here’s the bottom of Tony's journal, 
aos “journal.html”. Remember his packing 
ee list in his First journal entry? 


believe I finally got everything 
packed and ready to go. Because 
I'm on a Segway, I wasn't able 
to bring a whole lot with me: 


</p> ; 

ae AoA Ubi Tip Mebane UA oy ‘: a 
<1i>cellphone</1i> — 
<1i>iPod</1i> . CP ©) Ae Sichegser] 2 journsl fcurel him! oe ay 


<li>digital camera</li> 
<li>a protein bar</li> 
</ul> 
<p> 
Just the essentials. As Lao Tzu 
would have said, <q>A journey of 
a thousand miles begins with 
one Segway.</q> 
</p> 
</body> 
</html> 


june 2, 2012 


My Hirgt day of the pip! E can't bedkerwe | fimally got cwerything 
packed and reade to go, Because Ten on 0 Seqeey, [wast 
ebbe bo fring @ whode fot with me: 


: = SHiohore 
Here’s what the list looks like now. = iPod 
* digith! cameras 
C. aT * and 8 probein Gear 


Just the eeserials. As Lao Tau would hawe sald, “A journey of 
2 Oued oni begin with one Segeay.” 
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Giving the list some style 


You already know that once you know the basic CSS font, text, color, and other 
properties, you can style just about anything, including lists. You’ve already seen a little 
list styling (Chapter 12), and it turns out there are only a couple properties that are 
specific to lists, so there’s not too much more to learn. The main list property is called 
list-style-type, and it allows you to control the bullets (or markers, as they are 
called) used in your lists. Here are a few ways you can do that: 


Here we're setting the style on the <li> element. You tan also set it 


( on the <ul> element, and it will be inherited by the <li> elements. (ERE Heer tn at borin a 
°° Pari rriecees (eure | een nh ee hat 
Tony's List-ot Essennos 
li { Dise is the default ® calphone 
list-style-type: disc; marker type. - este rite 
} a, ® oopevhein bar 
‘ . 4) 
. “hitomi beatae sa E 
4] Se DUM ipencm ed eee at - 
li { Tan's List of Eesiertlatn 
list-style-type: circle; eee 
} » digital camorn 
. 8 pontein bar 
The circle property value gives 
you a simple circle marker. , 


rer, Tweet Ler? Lee 4 
g Fea LiL | a oad a ae * 


Foes List of Eeomnciaiss 


li { 
list-style-type: square; i me 
} = ciigltal sara 
ang n bar 
And square gives you a 
square marker. at | 1 
a 
caesar eye lt we eee, = 
E line me Ser = 
li { Tary's List off Pasenitials 
list-style-type: none; callphooe 
[Pod 
} geal Carer 
A value of none a protein ber 
removes the marker 
altogether. SS 
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What if you want a custom marker? 


Do you really think Tony would want anything less than his 
own custom marker? Well, luckily CSS has a property called 
list-style-image that lets you set an image to be the 
marker for a list. Let’s give it a try on Tony’s list: 


Here’s the list-style—image property, 
( which we're setting to a URL. 


a: he image “backpack.git” is a 


li { 
list-style-image: url (images/backpack.gif) ; small version of this backpack. 
peed Se Be Seems fitting, doesn't it? And 
i aa al in Tony's signature tolor, too. 
} 
We're adding some margin to add 
space on the left of the list items, 
and also a little top padding to give 
eath list item a bit of headroom. 
Ary ) My Tie Aieidite Aco = = 
i i OO) fe ehapter da journal/journat aml =i 
And, the final test drive... Foun ou ry 
This is it: your last change to Tony’s June 2, 2012 


site. Add the rule for the list item to your 
CSS and then reload. 
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Pry fons cia of the trip! Dcan't Gelleve [ feity got eeerthing packed 
ond ceady in go. Bescouse Dm on a Segway, T wasn't ebie fn bring 2 
ecg : eiede: bon with ric: 
eres the list with the marker 
replaced with an image and some —A & ealiphera 


extra margin and padding spacing. iPod 


¢ chygal canera 
& and a orotein bar 


Just the desentials, 4c Lad Tzu weld have cab, "A journey of a 
Drowned mie bagine wit one Saegway." 
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Q: What about ordered lists? 
What can | do to change their style? 


A: You style ordered and 
unordered lists in the same way. 


Of course, an ordered list has a 
sequence of numbers or letters for 
markers, not bullets. Using CSS, you 
can control whether an ordered list’s 
markers are decimal numbers, roman 
numerals, or alphabetic letters (like a, 
b, c) with the list-style-type property. 
Common values are decimal, upper- 
alpha, lower-alpha, upper-roman, and 
lower-roman. Consult a CSS reference 
for more options (there are many). 


thereyareno 
Dumb Questions 


Q: How can | control the text 
wrap on lists? In other words, how 
can | control whether text wraps 
underneath the marker or just 
underneath the text? 


A: There’s a property called 
list-style-position. If you set this 
property to “inside”, then your text will 
wrap under the marker. If you set it to 
“outside”, then it will wrap just under 
the text above it. 


Wow, who would have known 
we could take my site this far 
when we started? 


We're going to get Tess a Seqway of 
her own so she can go with me on the 
rest of my Seqway'n USA trip. See 
ya somewhere...and we'll BOTH be 
updating the web page. Thanks 
for everything! 
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Q: Are you sure that’s right? 
That seems backward. 


A: Yes, and here’s what inside and 
outside really mean: if you set your 
line-style-position to “inside”, then the 
marker is inside your list item and so 
text will wrap under it. If you set it to 
“outside”, then the marker is outside 
your list item and so text will just wrap 
under itself. And by “inside your item,” 
we mean inside the border of the list 
item’s box. 
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as BULLET POINTS 


m= Use the HTML table elements <table>, <tr>, 
<th>, and <td> together to create a table. 


= The <table> element defines and surrounds 
the entire table. 


= Tables are defined in rows, using the <tr> 
element. 


= Each row contains one or more data cells, 
defined with the <td> element. 


= Use the <th> element for data cells that are 
row or column headings. 


= = Tables are laid out in a grid. Each row 
corresponds to a <tr>...</tr> row in your 
HTML, and each column corresponds to the 
<td>...</td> content within the rows. 


= You can provide additional information about 
your tables with the <caption> element. 


= Tables have border-spacing, which is the 
space between cells. 


= Table data cells can also have padding and 
borders. 


= Just like you can control the padding, borders, 
and margins of elements, you can control the 
padding, borders, and border-spacing of table 
cells with CSS. 


= border-collapse is a special CSS property for 
tables that allows you to combine cell borders 
into one border for a cleaner look. 


= You can change the alignment of the data 
in your table cells with the text-align and 
vertical-align CSS properties. 


HTML tables are used to structure tabular data. 


You can add color to your tables with the 
background-color property. Background color 
can be added to the entire table, to each row, 
or to a single data cell. 


Use the CSS nth-child pseudo-class to add 
background color to every other row of a table. 


If you have no data for a data cell, put no 
content into the <td> element. You need to 
use a <td>...</td> element to maintain the 
alignment of the table, however. 


If your data cell needs to span multiple rows or 
columns, you can use the rowspan or colspan 
attributes of the <td> element. 


You can nest tables within tables by placing 
the <table> element and all its content inside a 
data cell. 


Tables should be used for tabular data, not for 
laying out your pages. Use CSS table display 
to create multicolumn page layouts as we 
described in Chapter 11. 


Lists can be styled with CSS just like any other 
element. There are a few CSS properties 
specific to lists, such as list-style-type and 
list-style-image. 


list-style-type allows you to change the type of 
the marker used in your list. 


list-style-image allows you to specify an image 
for your list marker. 
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tables and 


That crossword looks a bit like a table, doesn’t it? Give your left brain a 


workout and solve this crossword. All the words are from this chapter. 


Across 


1. Used to control whether the marker is inside or outside the 
list items border. 

4. What a data cell does when it uses more than one row or 
column. 

7. Default position of the caption. 

8. Used to merge borders. 

9. Use this property to use an image instead of a built-in 
marker in your lists. 

10. Area between borders. 

13. Adds a short description that is displayed with the table. 
14. You specify HTML tables by __, not columns. 

15. We call bullets a type of list . 


Down 

1. Use this property to change your list marker. 

2. Don’t use tables for this. 

3. list-item-position can be used to control the behavior of 
text ; 

5. Table cells have padding and borders, butno____s«j. 

6. <th> is used for these. 

11. <td> is for this. 

12. One table inside another is called sy 
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<!DOCTYPE html> 
<html> 
<head> 
; 1S@ <meta charset="utf-8"> 

—o <style type="text/css"> 

Lution td, th {border: lpx solid black;} 
</style> 

First, type in the <title>Testing Tony's Table</title> 


“ : , » </head> 
Testing Tony’s Table cocky 


HTML. Typing this <table> 
in, while tedious, <tr> 
will help get the <th>City</th> 
structure of the Peetsaates ses yee 
< emperature 
stable>, <tr>, Sur <th>Altitude</th> 
and <td> tags in <th>Population</th> 
your head. When <th>Diner Rating</th> 
you finish, give it a </tr> 
quick test, and then <tr> 
add the remaining <td>Walla bes aaa 
items from Tony's paiapereas 
table. Test that too. pe oe </td> 
<td>29, 686</td> 
<td>4/5</td> 
</tr> 
<tr> 
<td>Magic City, ID</td> 
<td>June 25th</td> 
<td>74</td> 
<td>5,312 ft</td> 
<td>50</td> 
<td>3/5</td> 
</tr> 
<tr> 
<td>Bountiful, UT</td> 
<td>July 10th</td> 
<td>91</td> 
<td>4,226 £t</td> 
<td>41,173</td> 
<td>4/5</td> 
</tr> 
<tr> 
<td>Last Chance, CO</td> 
<td>July 23rd</td> 
<td>102</td> 
<td>4,780 £t</td> 
<td>265</td> 
<td>3/5</td> 
</tr> 


Continues over the page 
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<tr> 
<td>Truth or Consequences, NM</td> 
<td>August 9th</td> 


amet <td>93</td> 
<td>4,242 £t</ta> 
Lution <td>7 ,289</td> 
Continuep <td>5/5</td> 
</tr> 
<tr> 


<td>Why, AZ</td> 
<td>August 18th</td> 
<td>104</td> 
<td>860 f£t</td> 
<td>480</td> 
<td>3/5</td> 
</tr> 
</table> 
</body> 
</html> 


i Testing Tamy's Tabla il 
lle ig + | 9 hle:/y/chapter]3/ jauraltable. hemi ; 


eo a oe 
Why,AZ Ausland «dR MDS 
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BE the Browser Solution 
On the left, you']] find the HTML 

for a table. Your job is to play 

like you're the browser displaying 

the table. Here’s the 
solution. 


<table> 
<tr> 
<th>Artist</th> 
<th>Album</th> 
</tr> 
<tr> 
<td>Enigma</td> 
<td>Le Roi Est Mort, Vive Le Roi!</td> 
</tr> 
<tr> 
<td>LTJ Bukem</td> 
<td>Progression Sessions 6</td> 
</tr> 
<tr> 
<td>Timo Maas</td> 
<td>Pictures</td> “polly ‘onicied 
</tr> GES Gs iw 
</table> 


/ Albom 

We formatted the HTML so Enigma 

aie tr oe LTS Bukem 
ai 
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Solution 
The double dotted lines are giving Tony’s table a busy and distracting look. 
It would be much better, and wouldn't detract from the table, if we could 
just have one border around each table cell. Can you think of a way 


to do that with styling given that you've just learned? You can set the 
border-spacing property to 0 to remove the space between the borders. 


We éould use border—spacing to set Spacing 
to O; then the two lines would be right next 
shiny jretensscnensrereceensnnmemanana gene to each other 


margin-left: 20px; 
margin-right: 20px; 
border: thin solid black; 
caption-side: bottom; 
border-spacing: Opx; 


=— as a - Si ——_— 


o,312 tC 


Gyn OUnuUnnennent 
4.776 fF i: 41. 


. . ) * ht wl 
Better, but we still have two lines and theyre right up 
against each other, so we have a double, thick, dotted 
border. We'd rather it just be ONE border between the 


tells. Wouldn't we? 


a0) 
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i 
"Sabb 


.center { Here are the two classes, 
text-align: center; one for center and one 
Let’s say we want the date, temperature, and } for vight alignment. 
diner rating to be center-aligned. And how -right { 


about right alignment on the altitude and text-align: right; a 
} 


population? Here’s how you would do that: 


<table > 
<caption>The cities I visited on my Segway'n USA travels</caption> 
<tr> 
<th>City</th> 
<th>Date</th> 
<th>Temperature</th> 
<th>Altitude</th> 
<th>Population</th> 
<th>Diner Rating</th> 
</tr> 
<tr> 
<td>Walla Walla, WA</td> 
<td class="center">June 15th</td> 
<td class="center">75</td> 
<td class="right">1,204 ft</td> 
<td class="right">29,686</td> 


<td class="center">4/5</td> Ko And here you just add 
</tr> sativ etd to the 
<tr> i appropriate class! 


<td>Magic City, ID</td> 

<td class="center">June 25th</td> 

<td class="center">74</td> 

<td class="right">5,312 ft</td> 

<td class="right">50</td> 

<td class="center">3/5</td> 
</tr> 


</table> 


To create alternating colors in the Magic City, Last Chance, and Why table rows with a class, 
add the class=“cellcolor” attribute to the opening <tr> tags in the table rows, like this: 


ge 
OLUTION 


2 Sra AS 


<tr class="cellcolor"> 
<td>Magic City, ID</td> 


</tr> 
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+ ? + 
Wie oe We aT? 
7 SoLlUuTiaqmw 
Just to make sure you've got this down, draw an arrow from 


each <td> element to its corresponding cell in the table. 
Here are the answers. 


<tr> 
<td rowspan="2">Truth or Consequences, NM</td> 
<td class="center">August 9th</td> 


<td class="center">93</td> — 

<td rowspan="2" class="right">4,242 £t</td> 
<td rowspan="2" class="right">7,289</td> 
<td class="center">5/5</td> 


</tr> 
<tr> 


<td class="center">August 27th</td> 
<td class="center">98</td> 


class="center">4/5</td> 


Truth or August 4th 
Consequences, 


NM 


A Serjous Exercise Solution 


To create alternating colors in the Magic City, Last Chance, and Why table rows with a 
pseudo-class, use the nth-child(odd) pseudo-class to select the odd <tr> rows in the table: 


tr:nth-child(odd) { 
background-color: #fcba7a; 


} 
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BARBELL 


It’s time to fall back on all that training you’ve done. What you need to do is 
change the table heading background color for just Tony and Tess, and do 
it without changing the background of the main table headings. How? You 
need to find a selector that selects only the nested table headings. 


S) peagpanii ae So_uTiean 


We can use a descendant 
selector to select just the 
nested table header. Here’s how 
you can do that: 


(— [ene Wate, WA fore 2 Sth ES ize 29,686 
(1) Start by selecting | pountinat, ur | Jaty 10eh 51 4220 = 41,173 ag 
the outer table... Soe eaepe iT 5 36s i 


Augie doh 


Truth or Consequences, MM 
| August 271 


(2) Then select the 


inner table... (3) Then select the 


table heading. 


(1) @, 


y? tobe a auiectn | 


background-color: white; 


Determine the } 
selector to select 

only the nested 

table heading 


elements. 
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OK HTMLeross Solution 


Ze Swabs eee 


I 

T SPAN S| ™ 

Ei y ; 
i 


Ea 
qi a. a ° Vann © Bas 


Ea 
BEBE RD | B 


(e| N 
M BOS EReR aw B 
A 
r waa Raa ue Ss 
asRsoe 
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a 
Getting In teractive * 


Yeah, just got your 
form. We're checking it 
with the server now, and 
then we'll get a response 
right back to you. 


So far all your web communication has been one-way: 
from your page to your visitors. Golly, wouldn't it be nice if your visitors 
could talk back? That’s where HTML forms come in: once you enable your pages 
with forms (along with a little help from a web server), your pages are going to be 
able to gather customer feedback, take an online order, get the next move in an 
online game, or collect the votes in a “hot or not” contest. In this chapter you’re going 
to meet a whole team of HTML elements that work together to create web forms. 
You'll also learn a bit about what goes on behind the scenes in the server to support 


forms, and we'll even talk about keeping those forms stylish. 
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How forms work 


If you use the Web at all, then you know what a form is. But you might not have 
really thought about what they have to do with HTML. A form is basically a web 
page with input fields that allows you to enter information. When the form is 
submitted, that information is packaged up and sent off to a web server to be processed 
by a server script. When the processing 1s done, what do you get? Another web page, 
of course, as a response. Let’s take a closer look at how this works: 


7 
he web servey receives the form 


The browser packages up all the data, and the eee 
sit. a web PA%e with data in the form and sends it Server stript ah sses it of f t, 5 
You visit a f; a : eee 
an HTML form, Kill ou over to the web server. 


+ it. 


the form, and submi 


Browser 


The server stript processes the data in the 
form and creates a brand-new HTML page as a 
response, which it hands back to the web server. 


Server Script 


, — Web Server 
Browser 
| h 
The browser gets the The response is an The web server sends the 


HTML web page. 


_ se 
server seripts respon 


response and displays it. back to the browser: 
at 
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How forms work Per ee : ! Esrer the Contes) 
in the browser le 


Jaw type 15 you ree fond chek Sue er de co 
To a browser, a form is just a bit of HTML in a page. Piet rocre 


You'll see that you can easily create forms in your Lest BanDe 
pages by adding a few new elements. Here’s how a ar 
form works from the browser’s perspective: 


The browser loads the page 
The browser loads the HTML for a page like 


it always does, and when it encounters form 
elements, it creates controls on the page that 
allow you to input various kinds of data. A 
control is just something like a button or a text 
input box or a drop-down menu—basically are 


Emer the Coote 
something that allows you to input data. eS] 4] Shes abaprer peor ber 


ia pe ln vou oer fad lk Suis eer oe ees 
You enter data An ie! ica 


. yor Las.aane: no 
You use the controls to enter data. Depending 


bate 
on the type of control, this happens in 

different ways. You can type a single line of 

text into a text control, or you might click one 

option of many in a checkbox control. We’ll 

look at the different kinds of controls shortly. 


You submit the form a 


You submit the form by clicking on a submit 
button control. ‘That’s the browser’s cue that it 
needs to package up all the data and send that 


data off to the server [ice ol gad Se RTL ered £54 Chace 1 Coney) 4 
La.” eC | ark acl ae corre aL | > eA. | oe 


The server responds 


Once the server has the form data, it passes 
it off to the appropriate server script for 
processing. This processing results in a 
brand-new HTML page that is returned to 
the browser, and since it’s just HTML, the 
browser displays it for you. 


Thanks, Huckanes Banged, for entering th: Haad Mint HTML ad 
C85 Chapter 14 contest. 


Byon win something, yrre'll bo hn Fire tn ence 
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What you write in HTML 


There’s no deep mystery to creating forms with HTML. In fact, in this chapter 

you're going to meet a whole new set of HTML elements that all work together 
to create forms. The best way to get a feel for forms is to look at a little HTML 

and then to give it a try. Check out this form: 


<!DOCTYPE html> 


<html> 
<head> 


<— This stuff is all old 


hat for You now. 


<meta charset="utf-8"> 


<title>! 


</head> 
<body> 


Enter the Contest</title> 


Here’s the form. 


) 


<form action="http: //wickedlysmart.com/hfhtmlcss/contest.php" 
method="POST"> 


COO © 


meS@ie ICAL 


<p>Just type in your name (and click Submit) 


contest: <br> 


</p> 
</form> 


</body> 
</html> 
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—_ and a 


nested 


SS 
oe We've got the <form> 


element itself... 


First name: <input type="text" name="firstname" value=""> <br> 
Last name: <input type="text" name="lastname" value=""> <br> 
<input type="submit"> 


bunch of elements 
inside it. 


For now, just take a good 
look at the form and 
what’s in it; we’ll be going 
into all the details 


throughout the chapter. 
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What the browser creates 


Big surprise; to create a form, you use a <form> element. Now, just about any block- 
level element can go inside the <form> element, but there’s a whole new set of elements 
that are made especially for forms. Each of these form elements provides a different 
way for you to enter information: text boxes, checkboxes, menus of options, and more. 
We'll examine all these elements, but first take another look back at the HTML on the 
previous page and see how the elements and content inside the <form> element are 
displayed in the page below: 


AAA Enter the Contest 


Ie oa ae, | es : — 
Here’s just normal aoe] ) | |S fle ys chapter14/concest form. hrm 


paragraph text in a form. 


(A) TUS pe in wour name (ad click SUBD) 0 ener se Conese 
And here are two text | (B) First mare: 7 
controls for entering a > (C) Last name: 


first and last name. |n (D) = 
HTML You use the <input> — 
element to create these. 


And here’s the 
submit button. 
(Your button might 
say “Submit Query” 
instead.) 


You'll find the contest form in your “chapter14/contest” folder. Open it, take 
Exercise another look around, then load it in your browser and enter the contest. 
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How the <form=> element works 


Let’s take a closer look at the <form> element—not only does it hold 
all the elements that make up the form, but it also tells the browser 
where to send your form data when you submit the form (and the 
method the browser should use to send it). 


The action attribute 
Here’s the opening tag, holds the URLof the 
Everything in the form web server... 
goes inside. 


the folder 
the seript 


) emt 


..and the name 

the server 
seript that will 
process the form 
data. 


The method attribute 
determines how the form 
data will be sent to the 
server. We've going, to 
use the most Common 
one: POST. Later in the 
chapter we'll talk about 
other ways to send data, 
and why ou might or 
might a use POST. 


/ 


Pca, 
<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST"> 


Everything inside your 


form goes here... 


</form>< ~_ and the closing tag 
ends the form. 


Hey wickedlysmart.com, my 
user just clicked a button to 
submit a form. I've got some form 
data I'm sending you via POST. It's 
addressed to the “contest.php” server 
script in the “hfhtmlcss” folder. 


Bring it on. 
We're ready! 


Browser wickedlysmart.com 
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Okay, so I have an HTML 
form—that seems like the 
easy part. But where do I get 
a server script, or how do I 
make one? 


Good question. 


Creating server scripts is a whole topic unto 
itself and far beyond what we cover in this book. 
Well, we tried to cover them, but the book ended 
up weighing more than you do (not good). So, 
anyway... 


To create server scripts, you need to know a 
scripting or programming language, and one 
that is supported by your hosting company. Most 
hosting companies support languages like PHP, 
Ruby on Rails, Perl, Python, Node.js, and Java 
(to name a few), and if you’re interested, you'll 


definitely want to pick up a book specifically 

for creating server scripts (also known as 
server-side programs). Check with your hosting 
company; they sometimes provide simple scripts 
to their customers, which takes the work out of 
developing these scripts yourself: 


As for this chapter, we’ve already developed 
the server scripts you'll need. All you’ll need to 
do is put the URL of the script in the action 
attribute of your <form> element. 
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What can go in a form? 


You can put just about any element into a form, but that’s not what we really 
care about right now; we’re interested in the form elements that create controls in 
the browser. Here’s a quick rundown of all the commonly used form elements. 
We’re going to start with the <input> form element, which plays many roles 
in the form’s world. 


Notice that 
both of 

these use the 
Same HTML 
element, but 
with different 


values in their 


text imput 


The text <input> element is 
for entering one line of text. 
Optional attributes let you 
set a maximum number of 
characters and the width of 
this control. 


Name: Buckaroo Banzal 


An <input> element with a type a 
attribute of “text” creates a one-line 
control in the browser page. 


Most form elements require a name 
that is used by the server seript. We'll 


Use the type attribute to see how this works in a bit. 


indicate you want a “Let” input. 


Saas ) The <input> 
<i tt ="text" ="Full 7 element is a 
pea fens rn Eta rere void element, 


) 
so theres no 


tontent after it. 


type attribute. b ‘oiiae 
su | int mput I The button is labeled 
it <i Submit” Cor “Submit 
The submit <input> element creates ( Submit ) ”) by default 
a button that allows you to submit a ee Query a‘ Y v : 
form. When you click this button, the althoug Dee (ae'll 
browser sends the form to the server change ee) 
script for processing. show you how 
For a submit button, specify “submit.” 
<input type="submit"> as the <input> element's type. 
652 Chapter 14 


www.it-ebooks.info 


html forms 


radio input 


The radio <input> element creates a (*) hot 

single control with several buttons, Not The radio canlvel 

only one of which can be selected allows only one of a set 
at any time. These are like old-time ae at shoes 

car radio buttons; you “push” one in, 

and the rest “pop out.” 


All the radio buttons 


Use a radio <i associated with a given | 
foe a nora set of choices must --but each Choice has 


have the same ~) a different value. 


<input type="radio" name="hotornot" value="hot"> 
Same here; <input type="radio" name="hotornot" value="not"> 
we're still using 
the <input> 
element, just 
with different 
type values. 


checkhox input gy cen 


A checkbox <input> element v Pepper 
creates a checkbox control that can [| Garlic 
be either checked or unchecked. i 
You can use multiple checkboxes 
together, and if you do, you can 
check as many or few as you like. 


Unlike radio buttons, a 
RK ehetkbox allows zero or 
more of a set of choices. 


Like radio, 
You use one Related checkboxes also share 
cheekbox a Common name. Each checkbox has a 


<input> element different value. 
for each choice. ay 


<input type="checkbox" name="spice" value="Salt"> 
<input type="checkbox" name="spice" value="Pepper"> 
<input type="checkbox" name="spice" value="Garlic"> 
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What can go in a form? (part Z) 


Okay, not every form element is an <input> element. There are a few others, like 
<select> for menus and <textarea> for typing in more than one line of text. So, 
why don’t you get familiar with these as well before moving on? Oh, and by the way, 


once you do that, you'll know 90% of the form elements (and 99% of the form 
elements that are commonly used). 


textarea 


The <textarea> element 


Customer feedback: 
creates a multiline text area 


| bove my mew Mini Cooped | got he red. smorbe model, and fve 


that you can type into. If you GEN Emig aloud Lowe like There's no bomertoe, Arid, itty 
y ¥P gd few iPad fits perfeerhy in the dash dritk holder Of eewrse, now 
type more text than will fit aucrvone else WANES Ore, 105, 
into the text area, then a scroll 
. . rows 
bar appears on the right side. 


ee ee 


cols 
The <textarea> 
element is - an Use the navad 
empty element, attribute to \s the 
loute tells 
$9 it has both Give the element The cals ier tharacters 
opening, and a unique name. browser ho 
closing, tags. 


wide to make the text area: 
>> v 


<textarea name="comments" rows="10" cols="48"></textarea> 


The rows attribute ee the 
rowser how many characters Any text that goes between the 
tall to make the text area opening and losing, tags becomes 
the initial text in the browser's 
text area control. 


You tan also specify the width and height of a textarea using, CSS. 
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select 


The <select> element creates a menu 
control in the web page. The menu 
provides a way to choose between a set The select element creates 
of choices. The <select> element works a menu that looks like 

in combination with the <option> this (although the look 
element below to create a menu. 


Buckaroo Banzai | > 


| 


will vary depending on the 


browser you're using). 


The <s 

oo ae = Just like the = nts sei 

rou : ae - select element 2 

roHP hem inte ome men ave ne the name attribute. 

( <select name="characters"> 
<option value="Buckaroo">Buckaroo Banzai</option> 
<option value="Tommy">Perfect Tommy</option> 
<option value="Penny">Penny Priddy</option> 


<option value="Jersey">New Jersey</option> 


<option value="John">John Parker</option> 
</select> 


option 


The <option> element works with After clicking on the 
the <select> element to create a menu, the menu items Perfect Tommy © 
menu. Use an <option> element drop down. Penny Priddy 
for each menu item. 7 Ream Jareey 
John Parker 
EE 


The éontent of the 


<select name="characters"> <option> element is used 
<option value="Buckaroo">Buckaroo Banzai</option> for the menu items’ 
<option value="Tommy">Perfect Tommy</option> destription. Each menu 
<option value="Penny">Penny Priddy</option> Fie option also in¢ludes a 


<option value="Jersey">New Jersey</option> value representing the 


<option value="John">John Parker</option> menu item. 
</select> 
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Wait, HTML5 
adds even more great 
input types! Don't 

forget those! 


Oh, even more can go in a form! 


Ah yes, we can’t forget all the new fun stuff. With HTML5, 
we've got even more specialized input forms. Let’s take a look: 


number input | | 
[ Me | 
7 I~) 
The number <input> element restricts 
input to numbers. You can even specify 


a min and max number that is allowed 
with optional attributes. 


Some browsers show arrows ‘ 
next to the input area 

you Can use to increase or 
decrease the number. 


The “number” type means you're expecting 
a number only, not text. 


Use the max and min 
attributes to restrict the 


numbers allowed. 


<input type="number" min="0" max="20"> 


range input esis 


The range <input> element is similar Both number and range have an optional 
to number except that it displays a step attribute you Can use to specify the 
slider instead of an input box. number of intervals for the values. 


<input type="range" min="0" max="20" step="5"> ea 


colorimpub sg, > 


Use the color <input> to specify input is not ; 

a color. When you click on the supported by aifcaie 

control, a color picker pops up he browser, Other. 

that allows you to select a color youll just get 

rather than having to type in a regular text 

the color name or value. input instead. <input type="color"> 
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date input oe 


Use the date <input> element to specify Bit coe a ee ae 
a date, with a date picker control. The 107 oe ao 
control creates a valid date format string fe ae 
to send to the server script. TER 


=e 


Like with ¢olor, if the date input isn't supported by the 


<input type="date"> ) 
P YP browser yet, you'll get a regular text input instead. 


emai] input te] input 


The email <input> element is just a text The tel <input> element is also just a text 
input, but on some mobile browsers, input, but like email, causes a custom 
you'll get a custom keyboard for email keyboard to pop up on mobile devices. 


when you start typing. 


<input type="tel"> 
<input type="email"> E = 


Phone; 355-lél2 


Email; Buckaroo Banzai 


These three <input> types are all variations of the 
text <input> type. On desktop browsers you won t 
notice a difference. But on mobile browsetrs, You might 
get a custom keyboard that makes it easier to get to 
the characters you need, like / and @ and numbers. 


ur] input 


Like email and tel, the url <input> 
type is just a text input, but causes 
a custom keyboard to pop up on 
mobile devices. 


<input type="url"> 


Not all browsers 
fully support these 
; ' input types yet. 

: Wateh It! The input types on these 


two pages are new in 
HTMLS, and while you can use them 


URL: http://banzal.com 


Even with these specialized + it’ pd 
ypes, it’s up to you to : In all web pages now 
make sure you know what values the server script is : display as i see rately “_ 


expecting and use the right <input> type. 
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athy 
i peal 3 


"aon ” 


8 
aguas 


Here's 


what 
the form 
should ar 


look like. 
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The Starbuzz Coffee website 
is kicking butt. We've got a new 
concept called the “Bean Machine," 
which is an online form to order 
our coffees. Can you make it 


happen? 


h drop—down menu 


of corkees A choice 
i = _ of whole or 
ground coffee 
| (you can only 


choose one) 


Shade Grown Bolivia Supremo 
Organic Guatemala 
Kenya 


How many 
bags, and 

Number of bags: wee Za eae 

Must arvive by date: , |) arrive by 


Extras: | itt 
a Gi wrap 
Qo Gib wrap or inélude 
tof Inelude eataley with . fi catalog 
choose zero, 
Ship te: 


one, or both) 


Gy ——~?d ae 


Sar ied 


CP consisting 
Sa a 


boxes 


a ® box for 
customer 


comments 


And a 
<a 
~ _ee 
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Markup Magnets 


Your job is to take the form element magnets and lay them on top 
of the corresponding controls in the sketch. You won't need all the 
magnets below to complete the job; some will be left over. Check 

your answer in the back of the chapter before moving on. 


<input type="number" 
Choese your beans: 
Type: 

© Whele bean 

© Ground 
Number of bags: ff 


Must arrive by date: | 
Extras: 


Shade Grown Bolivia Supremo 
Organi Guatemala 
Kenya 


be type="radio" 


i <option> ..- <option> 


input type="range" ...> 


<input types 
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Getting ready to build the Bean Machine form 


Before we start building that form, take a look inside the “chapter14/starbuzz” 
folder, and you'll find the file “form.html”. Open it and have a look around. All 
this file has in it are the HTML basics: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>The Starbuzz Bean Machine</title> 
</head> 
<body> 


<hl>The Starbuzz Bean Machine</h1> 
<h2>Fill out the form below and click “order now” to order</h2> 


All we've got so far is a 
Uscaiuhe heading identifying the page, 
</body> goind, to go here. along with instructions. 
</html> 

For now, we re 9oind, to build these 
forms without all the style we ve been 
using, on the Starbuzz site. Lea 
way, we Can tontentrate on the +orm 
HTML. We'll add the style in later. 


Figuring out what goes in the form element 


It’s time to add your very first <form> element. The first thing you have to know 
when creating a <form> element is the URL of the server script that 1s going to 
process your form data. We’ve already taken care of that for you; you'll find the 
server script that processes Starbuzz orders here: 


http: //starbuzzcoffee.com/processorder .php 


This URL points to the and to the protessorder-php server 
Starbuzz Coffee website... seript that’s on the server there. 
This server stript already knows 


how to take orders from the form 
we're Qoind, to build. 
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Adding the <form> element 


Once you know the URL of the server script that will process your form, all you need 
to do is plug it into the action attribute of your <form> element, like this (follow 
along and type the changes into your HTML): 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>The Starbuzz Bean Machine</title> 
</head> 
<body> 
<hl>The Starbuzz Bean Machine</hl1> 
<h2>Fill out the form below and click “order now” to order</h2> 
<form action="http: //starbuzzcoffee.com/processorder.php" method="POST"> 


ie! Here's the 


form element. The action attribute contains the And eneeber we've using 
ZY ESERS URL of the server script. Lhe POST method to deliver 
</body> the form data to the server. 
</html> Go ahead and add the More on this later- 
form closing tag too. 


So far, so good, but an empty <form> element isn’t going to get you very far. Looking back 
at the sketch of the form, there’s a lot there to add, but we’re going to start simple and get 
the “Ship to” part of the form done first, which consists of a bunch of text inputs and a 
number input. You already know a little about text inputs, but let’s take a closer look. Here’s 
what the text inputs for the Starbuzz form look like: 


Here the type is “text” because this 
IS going to be a text input control. 


vy 


We use the <input> — <input type="text" name="name"> SN We've got one text 
element for a few ? 


- 
different controls. <input type="text" name="address"> c— input tor each input 


: area in the form: 
The type attribute <input type="text" name="city"> &£——_ Name, Address, City, 
determines what kind 


of tontrol i te <input type="text" name="state"> a State, 2 and Phone: 


<input type="tel" name="phone"> 


H, th { OW » ) 
, bi athe sets cana re expecting The name attribute acts as an identifier for the 


data the user types in. Notice how each one is set to 
a different value. Let’s see how this works... 
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How form element names work 


Here’s the thing to know about the name attribute: it acts as the glue between your 
form and the server script that processes it. Here’s how this works: 


Each input control in your form has a 
name attribute: 
When you type the elements for a form into your HTML 


file, you give them unique names. You saw this with the 


text and tel inputs: 


<input 
<input 
<input 
<input 
<input 
<input 


nt whose 


’ leme 
tice here we ve got an € ) 
a ee is “name” (which is perfectly fine). 


type="text" name="name"> 


type="text" name="address"> 


Each <input> element 


type="text" name="city"> <——_ gets its own name. 
type="text" name="state"> 


type="text" name="Zip"> 


type="tel" name="phone"> 


What you enter into 


When you submit a form, the browser the form. 
packages up all the data using the i? 
unique names: 


Say you type your name, address, city, state, zip,and = ——~»>» 


Nume: Buckaroo Banzai 


phone into the form and click Submit. The browser takes eee, mnie rae 
each of these pieces of data and labels them with your cays [Las Angeles 
unique name attribute values. The browser then sends Basse, CA 

the names and values to the server. Like this: Hips S0050 


The unique 
names fo, each 
form element 


Phone: J10-555-1212 


Mii aS, 


7 city = Los Angeles 


Each unique 
name ets a 
value Tasos the 
data you type 
into the form. 
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state = CA 
zip = 90050 
phone = 310-555-1212 


= Banzai Institute 


name = Buckaroo Banzai 


processorder.php 


www.starbuzzcoffee.com 


What the browser packages The server seript needs the form data to be 
up for the server 


labeled so it can tell what is what. 
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Q: What’s the difference between a 
text <input> and a <textarea>? 


A: You want to use a text <input> for 
entering text that is just a single line, like 
a name or zip code, and a <textarea> for 
longer, multiline text. 


Q: Can | make the submit button say 
something other than “Submit”? 


A: Yes, just put a value attribute in the 


element and give it a value like “Order Now’. 


You can also use the value attribute of text 
input to give that input some default text. 


Q: Is there a limit to how much 
text | can type into a text <input> or a 
<textarea>? 


A: Browsers do place a limit on the 
amount of text you can type into either a 
text <input> or a <textarea>; however, it’s 
usually way more than you'd ever need to 
type. If you'd like to limit how much your 
users can type into a text <input>, you can 
use the maxlength attribute and set it to a 
specific number of characters. For example, 
maxlength="100" would limit users to typing 
at most 100 characters. However, for a 
<textarea>, there is no way with HTML to 
limit how much your users can type. 


BS The “tel”, “email”, and “url” look 
just like text inputs. Is there really a 
difference? 


A: The “tel”, “email”, and “url” type inputs 
all send text strings to the server script, so 
in that way, they are basically the same as 
a text type input. However, because the 
browser knows that the type is “tel”, for 
instance, it can be a bit smarter about the 
user interface it provides to the user. So, on 
some mobile browsers, the browser may 
display a numeric phone keypad. 


there are no 4 
Dumb Questions 


Q: | still don’t get how the names get 
matched up with the form data. 


A: Okay, you know each form element 
has a unique name, and you also know 

that the element has a corresponding value. 
When you click the Submit button, the 
browser takes all the names along with their 
values and sends them to the server. For 


instance, when you type the zip code “90050” 


into a text <input> element with the name 
“zip”, the browser sends “zip = 90050” to the 
server when the form is submitted. 


Q: How does the server script know 
the names I’m going to use in my form? 
In other words, how do | pick the names 
for my form elements? 


A: Good question. It really works the 
other way around: you have to know what 
form names your server script is expecting 
and write your form to match it. If you're 
using a server script that someone else 
wrote, he'll have to tell you what names 

to use, or provide that information in the 
documentation for the script. A good place to 
start is to ask your hosting company for help. 


Q: Why doesn’t the <option> element 
have a name attribute? Every other form 
element does. 


A: Good catch. All <option> elements 

are actually part of the menu that is created 
by the <select> element. So, we only really 
need one name for the entire menu, and that 
is already specified in the <select> element. 
In other words, <option> elements don’t 
need a name attribute because the <select> 
has already specified the name for the entire 
menu. Keep in mind that when the form is 
submitted, only the value of the currently 
selected option is sent along with this name 
to the server. 
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Q: Didn’t you say that the name for 

each form element needs to be unique? 
But the radio <input> elements all have 
the same name. 


A: Right. Radio buttons come as a set. 
Think about it: if you push one button in, the 
rest pop out. So, for the browser to know 
the radio buttons belong together, you use 
the same name. Say you have a set of radio 
buttons named “color” with values of “red”, 


“green”, and “blue”. They’re all colors, and 


only one color can be selected at a time, so 
a single name for the set makes sense. 


Q: What about checkboxes? Do they 
work like radio buttons? 


A: Yes; the only difference is that you are 
allowed to select more than one choice with 
a checkbox. 


When the browser sends the form data to 
the server, it combines all the checkbox 
values into one value and sends them 
along with the checkbox name. So, say you 
had “spice” checkboxes for “salt”, “pepper”, 
and “garlic”, and you checked them all; 
then the browser would send “spice = 
salt&pepper&garlic” to the server. 


Q: Geez, do | really need to know all 
this stuff about how data gets to the 
server? 


A: All you need to know is the names and 
types of the form elements your server script 
is expecting. Beyond that, knowing how it all 
works sometimes helps, but, no, you don’t 
need to know all the gory behind-the-scenes 
details of what is being sent to the server. 
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Back to getting those <input> elements into your HTML 


Now we’ve got to get those <input> elements inside the form. 

Check out the additions below, and then make the changes in 

your “form.html” file. 

Here’s JUST the form 
snippet from “fLovm-html”. 
Hey, we've got to save a 


few trees here! 


We're going, to Nest elements directly 
start by putting E—— inside a form. 
everything inside 

a <p> element. 


<form action="http: //starbuzzcoffee.com/processorder.php" method="POST"> 
<p>Ship to: <br> 
Name: <input type="text" name="name"> <br> Here are all the 
Address: <input type="text" name="address"> <br> <input> elements: 


City: <input type="text" name="city"> <br> one for each 


input in the 
State: <input type="text" name="state"> <br> “Ship to” seetion 
Zip: <input type="text" name="Zip"> <br> of the form. 
Phone: <input type="tel" name="phone"> <br> 
</p> 
<p> 
<input type="submit" value="Order Now"> 
</p> 
</form> 
And you should also know that <input> is an 
We've added a label for each inline element, so if you want some linebreaks 
input so the user knows what between the <input> elements, you have to 
Goes in the text input. add <br>s. That’s also why You need to nest 


them all inside a paragraph. 


Finally, don’t forget that users need a submit button to 
submit the form. So add a submit button by inserting an 
<input> at the bottom with a type of “submit”. Also add 
a value of “Order Now”, which will change the text of the 
button from “Submit” to “Order Now”. 


After you’ve made all these changes, save your “form.html” file 


dlet’s give this a whirl. Don't forget to validate your HTML. 
and let's give this a whir KR ai pan oe a a bool 
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A. form-al test drive #t=< 


; AS You don’t think we'd give You a toy example 
Reload the page, fill in the text inputs, and submit the form. thal deca 't ve ally work de you? Seriously 


When you do that, the browser will package up the data starbuzztoffee.com is all ready to take your 
and send it to the URL in the action attribute, which is at Tvsnaswicsion: Go for it! 
starbuzzcoffee.com. , 


Notice the change in the 


nes * ee a G Bet cz > f URL Your address bar 
PL! ofan Py cr yar | Apert ee Se 2), Here's the form alter you cubist die f. 
The Starbuxs Bean Machine ; (you'll see the URL in the 


orm’s attion attribute in 


Fl out the form below and click “order see" to order = 
the address bar). 


Sar ee 


Aue Buckeroo Eercral BO speapqaaa Tm Sortacs Hen Macken = sell, 
Adin ‘hanes Irethwee Lh) + 0 eben cor eee ch Se oe 
ae i A = oe a *. Se 
Cy: Let Angeles : 
tee The Starburs Bean Machine 
mga Thenkin. Brirkieta Baikal. (or peer onde Belen didn't pet porches of 
Phones SPO-S05-0219 haa or wherhar they ano whole argroand, You might wwal oo click she buck 
bain. 0 peek aed ary again othoradse, we moet beats in mabe. pr Ban 
Oster New Pelachies order, ond that would wack 
Heres Sha we reeerand Ernie rots eo for 
Sumber off Boga 1b \ 
Meme; Bugiars Rosin ; 
Aiea Hove's the server stripe’ 
redeem ; 
Slab: CA response. It looks like the 
bp: (OLS . ; ed 
Phone: $049. 1311 seript got what _ submitt . 
; fT but we haven't given it 
And here's the response everything ik weeds 
after submitting the form. 


Adding some more input elements to your form 


It looks like the server script isn’t going to let us get very far without telling it the 
beans we want, as well as the bean type (ground or whole). Let’s add the bean 
selection first by adding a <select> element to the form. Remember that the 
<select> element contains a list of options, each of which becomes a choice in 

a drop-down menu. Also, associated with each choice is a value; when the form is 
submitted, the value of the chosen menu option is sent to the server. Turn the page 
and let’s add the <select> element. 
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Adding the <select> element 


<form action="http://starbuzzcoffee.com/processorder.php" method="post"> 


<p> Here's our brand—new 
Choose your beans: Yo ~ <select> element. [+t gets a 
<select name="beans"> unique name. too. 

<option value="House Blend">House Blend</option> 

<option value="Bolivia">Shade Grown Bolivia Supremo</option> 

<option value="Guatemala">Organic Guatemala</option> 


<option value="Kenya">Kenya</option> 


</select> 
</p> Inside, we put each <option> 
element, one per Choice of coffee. 
<p> 


Ship to: <br> 
Name: <input type="text" name="name" value=""><br> 
Address: <input type="text" name="address" value=""><br> 
City: <input type="text" name="city" value=""><br> 
State: <input type="text" name="State" value=""><br> 
Zip: <input type="text" name="Zzip" value=""><br> 
Phone: <input type="tel" name="phone" value=""><br> 

</p> 

<p> 
<input type="submit" value="Order Now"> 

</p> 

</form> 


HTML Up Close 


Let’s take a closer look at the <option> element. 


The tontent of the 


s Aeeeaae element is used as the label 
Each option $ ‘) in the drop—down menu. 


<option value="Guatemala">Organic Guatemala</option> 


When the browser packages up the names 
and values of the form elements, it uses En In this case, the browser would send 
the name of the <select> element along the server beans = “Guatemala”. 

with the value of the chosen option. 
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html forms 


Test driving the <select> element sts 


Let’s give the <select> element a spin now. Reload your page, and 
you should have a nice new menu waiting for you. Choose your 
favorite coffee, fill in the rest of the form, and submit your order. 


‘ane Thaw Seah cs iit brit 7 
ee ee ee Sane ea Se US Se Tee rs 
[Bae (ee ee eel 6 2 O coe 


i 

Mame: Buckaroo Banzai Here's the form, complete with 
Addex |\Garccai Mcaiauite a <select> element. Notice all 
City. Los Angeles the options ave there. 


Phere 320-555-1712 


“BE 0-5 - Tha rare) Rasen he: 7 Fs 


Tlesks, Buckaros Baugul, fer your onde... Hur we Side’ pet poe chins: af 
We still haven't given the server whole of ground basa, Ya mi gat wane so click the hack bation ao po bewclk, andl 
: eae by Opin, other, wo wont be able fo eke yet Hein Machise order, aed 
stript everything it needs, but 


the wrald sock 
the stript is getting ont, SS, biel ated we seeded Geen poe ie ther 


in the form so far. 


Beans; Create! 
yo Number af bast | <———~. Looks like Starbuzz 
Heve’s the result of Mame: Doctarcn Hancal 


 dhthraiae Bitoni tet assumes we want | bag, 
the <select> choice. iy Coe Ane toffee if we don't specify. 
mam Bigs SO 
Here are all the | Phot: 110-855-1212 


text inputs and 
the tel input. 
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providing choices 


eo RAIN 

PQWER 
Change the <select> element name attribute to “thembeans”. Reload the form and resubmit 
your order. How does this affect the results you get back from the server script? 


Make sure you change the name back to “beans” when you’re done with this exercise. 


Give the customer a choice of whole or ground beans 


The customer needs to be able to choose whole or ground beans 

for her order. For those, we’re going to use radio buttons. Radio 

buttons are like the buttons on old car radios—you can push only 

one in at a time. The way they work in HTML is that you create 

one <input> of type “radio” for each button, so in this case you There are two 
need two buttons: one for whole beans and one for ground. Here’s radio buttons here: 


what that looks like: one for whole beans, 


and one for ground. 


<p>Type: <br> MV 


<input type="radio" name="beantype" value="whole"> Whole bean <br> 
<input type="radio" name="beantype" value="ground"> Ground 


sie ) ~ 
Notice that we 


a ae Here’s the unique name. And here’s the value that will be wadie 
eae o. a hs All vadio buttons in the sent to the server seript. Only acre Hes 
Loverank ba “vadic® same group share the one of these will be sent (the ‘abineiad dideoe 

vr ey i one that is selected when the od 
form is submitted). the element. 
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Punching the radio buttons 


Take the radio button HTML on the previous page 

and insert it into your HTML just below the paragraph 
containing the <select> element. Make sure you reload 
the page, and then submit it again. 


phe: wT Patan Be | 


f= Beers usbatere bee 


‘The Starbuzz Bean Machine 
| Fill out the form below and click “order now" to order 


| Cincee yiner teeing: | Orgeeet Caddie 


Ey 


| Dhip to 

| Name: Buckaroo Banzai 
| Addees Mangal Instinute 
ing Let Araelien 

| Sue CA 

Zip HO0SO 

| Phoow: 310-555-lziz 


| ica cr 


Wow! Starbuzz took our order, and 
we're not even done with it yet. We've 
still got to add the number of bags, 
the ship by date, the gift options, and 
an area for customer Comments. 


How could the order work without all the elements 
being in the form? Well, it all depends on how 

the server script is programmed. In this case, it is 
programmed to process the order even if the gift 
wrap, catalog options, and the customer comments 
are not submitted with the rest of the form data. The 
only way you can know if a server script requires 
certain form elements is to talk to the person who 
developed it, or to read the documentation. 


html forms 


Depending on your browser, 
you may have noticed that 
no radio button was pressed 


| Tsp. 
(@ Whole: boom > when You reloaded the page. 
| > Groen 


L deaeee) — The Haden Meee ates _s 
LR + ep re ae nee etd er eg 


Pp tie 


The Starhuze Bean Machine 


Thanks, Hockarot Baiiaai, for yoer onder fro tee Starbeax Bown MMachiac. 


Wour onder of f bag of whele: Qeaternale hasbeen sent hr: 
Piecbaroes dare 

Eletoaf Teste 

Eos dinpeles 

CA, S70 

ING. ST5- S22 
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using more input types 


Hey, 80% of our customers 
order ground beans. Can you 
make it so the ground bean type 
is already selected when the 
user loads the page? 


If you add a Boolean attribute named “checked” into your radio input 
element, then that element will be selected by default when the form 
is displayed by the browser. Add the checked attribute to the "ground" 
radio <input> element and give the page a test. You'll find the solution 
in the back of this chapter. 


(Remember that Boolean attributes don’t need a value; if the attribute 
checked is present, then the input control is checked.) 


Using more input types 


Next, we need to get the number of bags of coffee the customer wants to purchase, and 
the arrive by date. Both of these are <input> elements, but rather than just using basic 
text inputs, we can be more specific about the exact type of content we want in these 
<input> elements by using the “number” type for the number of bags, and the “date” 
type for the arrive by date. 


For the number of bags, we can get even more specific, by specifying both a minimum 
and maximum number of bags allowed: 


‘ if it¥I f mber of 

B " the number { pe and specifying the min and max nui : 

ase, c ¢an vestrict be input to a value that works for us (we don t ral 
customers ordering more than |O bags of one kind of coffee at a time!) 


Number of bags: <input type="number" name="bags" min="1" max="10"> 7 


ie And by using the “date” type here, 


browsers that support this type will 
help out the customer by Popping up 
a date picker control. 


Must arrive by date: <input type="date" name="date"> 


You'll get an error message if You try to enter more 
Now, if you try to enter more than 10 bags or fewer Cor less) than the allowed max or min. 
than | bag, in browsers that support the “number” J 
<input> type, you'll get an error message when you Number of bags: f24[ 5] 
try to submit the form indicating that the value you’ve 


: 2 value mest be bess than cr equal te 14 
entered is not correct. 
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html 


Adding the number and date input types 


Go ahead and add the two new <input> elements to your “form.htm!” file, below the 
bean type <input>s and above the Ship To fields, and give your new code a test drive. 


<form action="http://starbuzzcoffee.com/processorder.php" method="post"> 
<p> 
Choose your beans: 
<select name="beans"> 
<option value="House Blend">House Blend</option> 
<option value="Bolivia">Shade Grown Bolivia Supremo</option> 
<option value="Guatemala">Organic Guatemala</option> 
<option value="Kenya">Kenya</option> 
</select> 
</p> 
<p> 
Type:<br> 
<input type="radio" name="beantype" value="Wwhole">Whole bean<br> 
<input type="radio" name="beantype" value="ground" checked>Ground 


</p> 

<p> 
Number of bags: <input type="number" name="bags" min="1" max="10"> 

</p> 

<p> 
Must arrive by date: <input type="date" name="date"> 

</p> 

<p> We've added the new code 
Ship to: <br> here. Remember that 
Name: <input type="text" name="name" value=""><br> browsers may display these 
Address: <input type="text" name="address" value=""><br> differently, depending on 
City: <input type="text" name="city" value=""><br> which browser you're using, 
State: <input type="text" name="State" value=""><br> Try more than one browser! 


Zip: <input type="text" name="zip" value=""><br> 
Phone: <input type="tel" name="phone" value=""><br> 
</p> 
<p> 
<input type="submit" value="Order Now"> 
</p> 
</form> 


Turn the page to see the results of our test drive... 
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test driving the form so far 


Test driving the number and date <input> elements 


| esa ina beeen 


+ 20 # Aen hee dic bee bee a 4 


‘The Starbuzz Bean Machine 
Fill gist ike Form belie and click “order aow" to order 


Ce ee So eee 


Tppm: 
= Whale bem 
Greend 


K™ Here’s what we entered 
into the form. Notice 
that the number input 

‘ has up/down arrows, 
but the date control is 
just a text input in this 


browser (Chrome). 


(Sanobser oi! bare. 
Med ari pb ee 1 


Completing the form 


You’re almost there. You’ve got just two controls 
to add to the form: the “Extras” control with two 
checkboxes and the customer comment control. 
You're really getting the hang of forms, so we’re 
going to add them both at the same time. 


The Extras section consists of two Tid 


checkboxes, one for gift wrap and 
another to include a catalog, 


It looks like the “In¢lude catalog” 
option should be checked by default 


The Customer 
Comments section is 
just a <textarea>. 
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gigs 


The Starburz Bean Machine 


‘Tinie. Beeches ee fer pom zeder ees Bee See, Bem Elec 
Vege endef 5 (haga cet ened bodied Ped bees Ge 


Low lal 
(CA, ae 
iB 5 LF 


hae) aa bee deere bey ET 


And here’s what the 
Bean Machine returns. 
Looks like we ordered 


5 bags of coffeel 


grerby, 
a = 
w tr Shade Grown Bolivia Supremo 
S 4 } 
a a Organic Guatemala 
& gi! Kenya 
AqaerS 


ad | (retinal: shies iatth eeder 


Nanber of base [ 
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html 


Adding the checkboxes and text area 


You know the drill: look over the new HTML and add it to your “form.html”. 


<form action="http://starbuzzcoffee.com/processorder.php" method="post"> 
<p> 
Choose your beans: 
<select name="beans"> 
<option value="House Blend">House Blend</option> 
<option value="Bolivia">Shade Grown Bolivia Supremo</option> 
<option value="Guatemala">Organic Guatemala</option> 
<option value="Kenya">Kenya</option> 
</select> 
</p> 
<p> 
Type:<br> 
<input type="radio" name="beantype" value="Wwhole">Whole bean<br> 
<input type="radio" name="beantype" value="ground" checked>Ground 
</p> 
<p>Number of bags: <input type="number" name="bags" min="1" max="10"></p> 
<p>Must arrive by date: <input type="date" name="date"></p> 
Here we've added a checkbox for each option. Notice 


as that these share the same name, ‘extrasLJ”... “but have different values. 
Extras:<br> 


<input type="checkbox" name="extras[]" value="giftwrap">Gift wrap<br> 
<input type="checkbox" name="extras[]" value="catalog" checked>Include catalog 


with order yA 
</p> 


We've using the As with the 


ae checked attribute vadio buttons, 
can pews to specify that we've put 
Name: <input type="text" name="name" value=""><br> the catalog option these labels to 
Address: <input type="text" name="address" value=""><br> 4 ould be checked the right 
City: <input type="text" name="city" value=""><br> by default. You the checkboxes. 
State: <input type="text" name="State" value=""><br> tan add a checked 
Zip: <input type="text" name="zip" value=""><br> stiahyte te. mone 
Phone: <input type="tel" name="phone" value=""><br> Lian one heekbox. 

</p> 


<p>Customer Comments :<br> 
<textarea name="comments"></textarea> 


</p> 
ar 
<p> Here's the text area. 
<input type="submit" value="Order Now"> 
</p> 
</form> 
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successful submission 


The final form test drive st 


Save your changes, reload, and check out the new form. 
Don’t you think it’s looking quite nice? 


mo gg joan 23 co 
The Starbuzz Bean Machine 


FID owt the form below ond click “order mew" to order 


Chatet hour boned |Mownibed 


Tye Here’s what you get when you submit. 
cs Wika bows The server seript has received all 
ie) Cire 


the form data on the page and has 
incorporated it into the response 


Muraber of laage: ? 4 


Muse arrive by ete: 2002-09-14 " page: See if you ean locate all the 
fhicon Here’s our brand-new form data you submitted. 
= Ohi wrap Zz checkboxes, with the catalog 
etaarhia ease: checkbox already checked. 

Beeb BAD The Saartass Meer ttiitome F 
Kun Beckaroa Banzal : Trt ER ee ee =] wo inca ob 
Adios: Bacal Instiete 
Cay: Lot Angeles The Starbuzz Bean Machine 
Phone: 210-555-1212 And a nice new 1 Your avder off Dibags of geil Howse Blend catalog included) has heen sent tee 

_ text area as we 
Se ee | Abaco fiat 
Send ime some samples if st shageten 
pou have ay available Ca, Wie 

AMO- 5539-212 


wn wl bee del reereerd bar ST 1A 


Thest poe be subeiting yor coerneets in Stebel! Tle ee preg ces Gee 
ta Diese Machine usc Yos makd. 


Sih ae: ner aarp Of ca Me cay a Be 


Be sure and try out all the 
various Combinations of sending, 
this form (with/without gift 
wrap, with/without a cataloa, 
different coffees, and so on) 
and see how it all works. 
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html forms 


Stop right there. Do you 
think I didn't see the way 
you slipped in that element name 
of “extras[]"? What's with those 
square brackets! You have to 
explain that. 


Believe it or not, “extras[]” 
is a perfectly valid name for 
a form element. 


But even if it’s valid, it doesn’t exactly look 
normal, does it? Here’s the deal: from the 
perspective of HTML, this is a normal form 
element name; it doesn’t have any effect on 
the browser at all if it has square brackets in 
the name. 


So why did we use them? It turns out that the 
scripting language that the “processorder.php” 
server script is written in (PHP) likes a little 
hint that a form variable may have multiple 
values in it. The way you give it this hint is to 
add “[ ]” on the end of the name. 


So, from the perspective of learning HTML, 

you can pretty much forget about all this, but 

you might just tuck this into the back of your 

mind in case you ever write a form that uses a 
PHP server script in the future. 
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match the 


BE the Browser 

Below, you']] find an HTML form, and on the right the data a 
user entered into the form. Your job is to play like you're the 
browser and match each form element name with the values the 
user entered. After you've done the exercise, look 
at the end of the chapter to see if you matched up 
the form names with the values correctly. 


<form action="http://www.chooseyourmini.com/choice.php" method="POST"> 
<p>Your information: <br> 


Name: <input type="text" name="name"><br> 
Zip: <input type="text" name="zip"><br> 


</p> 
<p>Which model do you want? <br> 
<select name="model"> 
<option value="cooper">Mini Cooper</option> 
<option value="cooperS">Mini Cooper S</option> 
<option value="convertible">Mini Cooper Convertible</option> 
</select> 
</p> 
<p>Which color do you want? <br> 
<input type="radio" name="color" value="chilired"> Chili Red <br> 
<input type="radio" name="color" value="hyperblue"> Hyper Blue 
</p> 
<p>Which options do you want? <br> 
<input type="checkbox" name="caroptions[]" value="Stripes"> Racing Stripes 
<br> 
<input type="checkbox" name="caroptions[]" value="sportseats"> Sport Seats 
</p> 


<p> 
<input type="submit" value="Order Now"> 
</p> 


Here’s the form. 
</form> 
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ohana) Cho yur Mi 


| | rey +) Goin JTWC ESO bape ni AL been 
Choose your Mini Cooper 


Your infomation: 
Name; Buckaroo Barwa 
Zip SS 


Which model do wou want? 
Min. Cocper Comertibie lal 


Which color do you want 
® Chili Red 

Hyper Blue: 

Which Options do voR Wan! 
@ Racine Siipes 

©) Sport Seam 


‘Submit | 


color 


Extra eredit... 


html forms 


And here’s the form filled out. 


with its form name and 


answers here. 
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Mateh each piece of form data 


put Your 


you are here > 
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form methods: get and post 


Now that we've got the form 
finished, can we talk about the method 
the browser uses to send this data to the 
server? We've been using POST, but you 
said there are other methods, too. 


There are two primary methods the 
browser uses: POST and GET. 


POST and GET accomplish the same thing—getting 
your form data from the browser to a server—but in 
two different ways. POST packages up your form 
variables and sends them behind the scenes to your 
server, while GET also packages up your form variables, 
but appends them on the end of the URL before it 
sends a request to the server. 


With POST, all the form data is sent as part of 
(— the request and is invisible to the user. 


POST 


re The user just sees 

= ) 
Seis the server seript's 
URL in her browser 
http: //wickedlysmart.com/hfhtmlcss/contest.php <— address bar. 


With GET, the form data is added to the URL 
itself, so the user sees the form data. 


Notice the form 
data added on 
to the end of 
the URL. This 
is what the 
coat user sees in the 
address bar. 


http: //wickedlysmart.com/hfhtmlcss/contest.php?firstname=buckarooélastname=banzai 
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Watching GET in action 


There’s no better way to understand GET than to see it in action. 
Open up your “form.html” file and make the following small change: 


html forms 


Just change the method 
from “POST” to “GET”. 


q 


<form action="http://starbuzzcoffee.com/processorder.php" method="GET"> 


Save and reload the page; then fill out the form and submit it. You 


should see something like this: 


You'll see this URL 
in Your browser. y 


aan 


L 7. 


The Starbozz Bran Machine 


Times Behe cree Beene! ee poe ess Sewn ee iste: Bone Hedi 


ees ee 


Veo coker eat | Saag al pel Pee pa cei, de kod a 
Aur. oe 
Chi Paki 
Tool pis 


ie ee ee a 


http: //starbuzzcoffee.com/processorder . php?beans=Kenyaé&beantype=ground& 
extras%5B%5D=catalog&éname=Buckaroo+Banzai &address=BanzaitiInstituteé&city= 
Los+tAngeles&state=CA&zip=90050 &éphone=3105551212&comments=Great+coffee 
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Now You Can see every form 
element name and its values 
right here in the URL. 


Q: Why is it called GET if we’re 
sending something to the server? 


A: Good question. What's the main job of 
a browser? To get web pages from a server. 
And when you are using GET, the browser 
is just going about getting a web page in the 
normal way it always does, except that, in 
the case of a form, it has appended some 
more data to the end of the URL. Other than 
that, the browser just acts like it’s a normal 
request. 


With POST, on the other hand, the browser 
actually creates a little data package and 
sends it to the server. 


thereyareno 
Dumb Questions 


Q: So why would | use POST over GET, 
or vice versa? 


A: There are a couple of big differences 
that really matter. If you want users to be 
able to bookmark pages that are the result 
of submitting a form, then you have to use 
GET, because there is no way to bookmark 
a page that has been returned as a result of 
a POST. When would you want to do that? 
Say you have a server script that returns a 
list of search results; you might want users 
to be able to bookmark those results so they 
can see them again without having to fill out 
a form. 


On the other hand, if you have a server 
script that processes orders, then you 
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Notice that the browser entodes 
various characters, like spaces. The 
server s¢ript will automatically detode 
these when it receives them. 


wouldn’t want users to be able to bookmark 
the page. (Otherwise, every time they 
returned to the bookmark, the order would 
be resubmitted.) 


Asituation when you’d never want to use 

a GET is when the data in your form is 
private, like a credit card or a password. 
Because the URL is in plain view, the private 
information is easily found by others if they 
look through your browser history or if the 
GET somehow gets bookmarked. 


Finally, if you use a <textarea>, you should 
use POST, because you're probably sending 
a lot of data. Both GET and POST requests 
have a limit on the amount of data you can 
send, but the limit on a POST request is 
usually much larger. 
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test yourself: 


dink your pencil 


fe 


GET or POST 


For each description, circle either GET or POST 

depending on which method would be more 

appropriate. If you think it could be either, circle 

both. But be prepared to defend your answers... 
POST = 4A form for typing in a username and password. 
POST = 4 form for ordering CDs. 


POST = 4A form for looking up current events. 


POST = 4A form to post book reviews. 


POST = 4A form for retrieving benefits by your government ID number. 
POST = 4A form to send customer feedback. 
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I've been meaning to 
say, great job on the Bean Machine! 
This is really going to boost our coffee 
bean sales. All you need to do is give this a 
little style, and we're ready to launch it 
for our customers. 


5 Pig Sertre Beers My rey 
€¢4C¢- 4 le ca | de eg Ee ay 


The Starbuzz Bean Machine 
Fill out the form below and cick “order now" to order 
(hese pcm beers: | eer Geen ites Sere 
Type 
i Whale bean 
Crcund 
Member of bags: 's 
Mustarivebypekiic: Gila 


faces 
@ GEL etap 


2 Taclale catalog wth onder 
Ship imu 


Adilress: Geeinseen 
CUES {ie eerie rf 
Sate ca 

ip; ane 

home: (ii isin 


Custumes Comments: 


ee ee ET 
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html forms 


RAIN 
Qweek 


Given everything you 
know about HTML 

and CSS, how would 
you approach styling 
this form? 


you are here > 


681 


deciding how 


your pencil 


Forms are usually tabular in their layout, so you'll probably find that using a CSS table display 
layout works well for designing your form's presentation...and that’s what we'll use to lay out 

the Bean Machine form. With this table display layout, the page will look like a real form rather 
than a ragged collection of input elements, and it will be easier to read. 


Before we do that, let's figure out the table structure that is inherent in this form. Starting with 
the sketch below, fit the elements into a table (hint: we found it fits nicely into 2 columns and 14 
rows), so each row is represented with a block element, and each cell is also represented with a 
block element. Notice you may have to add some structure to the HTML to make this work. 


No peeking at the next page before you do the 
exercise. Really! Cover it up or something. 


rum a 
a Tes rte Sen Pu bare 


i cc A Filey {) (chapter 14 sniarburzy ben hii oh 


The Starbuzz Bean Machine 
Fill owt the form below and click “order now’ to order 


afd 
i pica uke eth order 
hi tan 
Fier 
Address 
Cine 
Bhake 
Tp 
Phaora: 


Corton Comme 
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Solution Forms are usually tabular in their layout, so you'll probably find that using a CSS 
table display layout works well for designing your form’s presentation...and that's 


what we'll use to lay out the Bean Machine form. With this table display layout, the page will look 
like a real form rather than a ragged collection of input elements, and it will be easier to read. 


Before we do that, let's figure out the table structure that is inherent in this form. Starting with the 
sketch below, fit the elements into a table (hint: we found it fits nicely into 2 columns and 14 rows), 
so each row is represented with a block element, and each cell is also represented with a block 

element. Notice you may have to add some structure to the HTML to make this work. 


Here’s what we came up with...compare to your 
solution before moving on! 


table. 

Here’s the sketch of the 

its simple table display layout, 
ith 2 columns and IF rows— 

eet | ou foe each main part of the 


: 
a 
a o wa. The forte eon Meche 


+ 4 Com OS Mes) cher 4 ce be oy ecPorm ii 


form. 
The Starbuzz Bean Machine 
The labels for i 
each form Fill out the Form below and click “order new" to order 
clement go in Pon We've thrown all the input 
the left Column. Phooee jour beget | isis biavai ; ky elements into the righthand 
The cell values | a ia eae cole 
are all aligned Phoaber of a 7 : , 
Sone marca Notice that we've Grouped each 
the top. set of checkboxes and radio 
re A an A one le meee 


The ¢ell on ~1____s, Shy te 
the vight am aie | Remember that each cell 
of “Ship Adres 


corresponds to a block element, so 


to” is empty; Ciby we'll add Some more <p> elements 
there's no Shader to make sure we ve got a separate 
tontvcl here: Ie block element for each cell. 

“Te 


And we'll also need some extra 


tb ene ———| block elements for the rows. We'll 

Lye auberik use <div> elements, just like we 

button is did before (in Chapter II). 

empty. There s And finally, we'll need one element 

no label to that are everything, for the 

put er Orie hom table itself. We can use the form 
wd element. for this! 


We made the text area bigger too! 
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Getting the form elements into HTML 
structure for table display layout 


Now that you know how to organize the form elements in a table display layout, 
you need to put your HTML writing skills to the test. So get typing! 


Titi 


ea Reany Bake 


Just kidding. We wouldn’t make you type all this...after all, this chapter 1s really 


about forms, not table display layout. We already typed this in for you; it’s in the Here’s the <form> element; 
file “styledform.html” in the “chapter14/starbuzz” folder. Even though it looks we re goin to use this 
complicated, it’s really not that bad. We’ve added a few annotations below to point element for the “table” 


out the main parts. 


part of the display. 
<form action="http://starbuzzcoffee.com/processorder.php" method="post"> aa 


<div class="tableRow"> ——.. , , 
Weve using a <div> with 


<p> 
n aeaee your beans: the class “tableRow” for 
</p> each row in the table. 
<p> 
<select name="beans"> 
<option value="House Blend">House Blend</option> 
<option value="Bolivia">Shade Grown Bolivia Supremo</option> 
<option value="Guatemala">Organic Guatemala</option> 
<option value="Kenya">Kenya</option> 
</select> 
</p> 


</div> : 
edie eiayeS abiensws: And the content for each cell is 


p> Type: </p> nested inside a <p> element. 
<p> 


<input type="radio" name="beantype" value="ground" checked> Groun 

</p> 
</div> 
<div class="tableRow"> 

<p> Number of bags: </p> 

<p> <input type="number" name="bags" min="1" max="10"> </p> 
</div> 
<div class="tableRow label"> 

<p> Must arrive by date: </p> 

<p> <input type="date" name="date"> </p> 


<input type="radio" name="beantype" value="whole"> Whole oy 
d 


» ‘. 
</div> For the bean selection menu, the “beantype radio 
<div class="tableRow"> buttons, and the “extras” checkboxes, we put all 

<p> Extras: </p> the form elements for each menu in one data cell. 
<p> 


<input type="checkbox" name="extras[]" value="giftwrap"> Gift wrap<br> 
<input type="checkbox" name="extras[]" value="catalog" checked> 
Include catalog with order 
</p> 
</div> Code continues on the next page. 
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For the row Containing, just the label 
Ship to”, we've added a class “heading” to 
the <p> so we can bold this text. 


/ 


<p class="heading"> Ship to </p> 


<div class="tableRow"> 


<p></p> 
</div> 
<div class="tableRow"> 
<p> Name: </p> 
<p> <input type="text" 
</div> 
<div class="tableRow"> 
<p> Address: </p> 
<p> <input type="text" 
</div> 
<div class="tableRow"> 
<p> City: </p> 
<p> <input type="text" 
</div> 
<div class="tableRow"> 
<p> State: </p> 
<p> <input type="text" 
</div> 
<div class="tableRow"> 
<p> Zip: </p> 
<p> <input type="text" 
</div> 
<div class="tableRow"> 
<p> Phone: </p> 


html forms 


= Reapy Bake 
| HTM 


Notice that we've also got an empty cell 
in the right column, so we Can just put an 
empty <p> element here. 


= 
/ 


name="name" value=""> </p> 
All the rows are 


straightforward: a 
“LableRow” <div> for the 


name="address" value=""> </p> row, and each cell ina <p>: 


name="Ccity" value=""> </p> 


name="sState" value=""> </p> 


name="zip" value=""> </p> 


<p> <input type="tel" name="phone" value=""> </p> 


</div> 

<div class="tableRow"> 
<p> Customer Comments: 
<p> 


</p> 


<textarea name="comments" rows="10" cols="48"></textarea> 


</p> 

</div> 

<div class="tableRow"> 
<p></p> 


<p> <input type="submit" value="Order Now"> </p> 


</div> 
</form> 


And for the last row, we've got 
an empty cell in the left ¢olumn, 
So again, we Can use an empty <P> 
element for that. 


ee 
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Styling the form with CSS 


We’ve got all the structure we need, so now we just need to add a few styling rules 
and we'll be done. Because this form is part of the Starbuzz site, we’re going to 


—-—— 


/ J a 


reuse some of the style in the “starbuzz.css” stylesheet, and create a new stylesheet, 
“styledform.css”, to add new style rules for the Bean Machine form. All of this CSS 
should be familiar to you now. We’re not using any rules unique to forms; it’s all 
just the same stuff you’ve been using in the last few chapters. 


You'll find this CSS in the file “styledform.css” in the folder “chapter14/starbuzz”. 


body { 


We're going, to rely on the Starbuzz CSS for some of 
our style, but we're adding the Starbuzz background 
image, and a margin to the body. 


background: #efe5d0 url (images/background.gif) top left; 


margin: 20px; 


} 
form { 
display: table; 
padding: 10px; 
border: thin dotted #7e7e7e; 
background-color: #elceb8 ; 
} 


form textarea { 
width: 500px; 
height: 200px; 
} 


div.tableRow { 
display: table-row; 
} 


div.tableRow p { 
display: table-cell; 
vertical-align: top; 
padding: 3px; 

} 


div.tableRow p:first-child { 
text-align: right; 


} 

p.heading { 
font-weight: bold; 

} 
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5 
5 
5 
; 
; 


We've using the form to represent the 
table in the table display... 


and adding a border around the form, and 
some padding between the form content 
and the border, and a background color to 
offset it from the background. 


We're making the textarea control in the 
form biager, so there’s more room tor 


Comments by setting its width and height. 


Each “tableRow” <div> atts as a row in 
Lhe table display layout: 


Each <p> element that is nested in a “tableRow” 
<div> is a table cell. We vertically align the content 
in each <p> so the content in each row lines up at 
the top of the cells. And we're adding a bit of 
padding here too, to add space between the rows. 


This vule uses the first—child pseudo—element on the selector 
for <p> elements nested inside “tableRow” <div>s. This means 
the first <p> element in each row is aligned to the right, so 
they all line up vertically against the right side of the column. 


And for any <p> elements with the ¢lass “heading”, we bold the 
text so it looks like a heading. We use this in the “Ship to” cell. 
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Test drive the styled form ste 


You’re going to add two <link> elements to the <head> of your L- h your HTML 
HTML in “styledform.html”, linking in the Starbuzz stylesheet from \f you want to stretth you 


Chapter 12, “starbuzz.css”, and your new stylesheet, “styledform.css”. and CSS skills a a: oe ig aed 
Make sure you get the order correct: link the “starbuzz.css” file first, tan add the ne Ste a 
then the “styledform.css”. Once you’ve got the two stylesheets linked, footer to the Bean Machine look 
save and reload your page. You should see the snazzy, styled version and make the te lemenks 

of the Starbuzz Bean Machine in your browser. veally nice with those € 


Wow, what a difference a little style makes! 


an Machine Lorm now matches 
te ee the Starbuzz site better. 


The labels are 
aligned with the 
top of the form 
elements, and 
they've aligned to —_ FA -: 
the right as well. | sae 
This alignment oS aa 
makes it easier to 

see which labels 
belong with which 


The “Ship to” 
heading is bold, 
just like we wanted. 


tontrols. 

Sor 
The space between nj 
the rows makes a a ae 
big difference and Mor OTTO 
makes the form 


much easier to read. 


We've got two columns and all the content in the rows lines up nicely! 
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A. word about accessibility 


So far we’ve been labeling our form elements with simple text, but we should 
really be using the <labe1l> element to mark up these labels. The <labe1> 

element provides further information about the structure of your page, allows 
you to style your labels using CSS more easily, and helps screen readers for the 


We've created a complete version 
a of the Bean Machine with labels, 
and updated the CSS to go with 
it. Check out accessform-html 
and attessform.css in the code 


ae ae loads. 
visually impaired to correctly identify form elements. Genes 

To use a <label> element, first add an 

id attribute to your form element. 
<input type="radio" name="hotornot" value="hot" \id="hot"> fey hot 
<label for="hot">hot</label> 

> not 

<input type="radio" name="hotorhot" value="not" id="not"> 


<label for="not">not</label> 


KL Then add a <label> and set its Co? Now the text next to these 
attribute to the corresponding id. radio buttons is a label. 


By default, labels don’t look any different from just normal text. However, they can 
make a big difference when it comes to accessibility. You can use the <labe1> element 
with any form control, so we can add a label to each part of our Bean Machine form. 
For instance, we could add a label to the number input for the number of bags like this: 


<label for="bags">Number of bags:</label> 
<input type="number" id="bags" name="bags" min="1" max="10"> 


; mi d id 
We? yu - ( It's okay to have the name an | 
bo ogni tii attributes use the same value, in 


this case, “bags”. 


When you add labels to radio or checkbox controls, remember that the id of each 
control needs to be unique, even though the name of all the controls in a group is the 
same. So, to add labels to the “beantype” radio control in the Bean Machine, create 
unique ids for both the whole and ground options: 


The name of both controls is “beantype”, s 
they are grouped together when you Las Piesehdineedte Berens 
ww 


the form to the server seript. Paks 


<input type="radio" id="whole beantype" name="beantype" value="whole"> 
<label for="whole beantype">Whole bean</label><br> 
<input type="radio" id="ground_beantype" name="beantype" value="ground" checked> 
<label for="ground_beantype">Ground</label> 
Notice that a label can come before or after the control 
it’s assotiated with; as long as the value of the for attribute 
matches the id, it doesn't matter where the label is. 
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What more could possibly go into a form? 


We've covered just about everything you'll regularly use in your forms, but there are 
a few more items you might want to consider adding to your form répertoire. We’re 
including them here just in case you want to take your own form studies even further. 


Fieldsets and legends 


When your forms start getting large, it can be helpful to visually group ; Conaiments— 
elements together. While you might use <div>s and CSS to do this, 


HTML also provides a <fieldset> element that can be used to . ait 
group together common elements. <fieldset> makes use of a second = cee 
THe 


element, called <legend>. Here’s how they work together: — 


The <fieldset> element surrounds a The <legend> provides a 


ehenite ee label for the Jroup: Here’s how the Fieldset 
<fieldset> ) and legend look in one 
<legend>Condiments</legend> browser. You'll find 
<input type="checkbox" name="spice" value="salt"> that browsers display 
pene. Foes them differently. 


<input type="checkbox" name="spice" value="pepper"> 
Pepper <br> 
<input type="checkbox" name="Spice" value="garlic"> 
Garlic 
</fieldset> 


Passwords 
The password <input> element works just like the text <input> “oS 
element, except that the text you type is masked. This is useful eeers© 


for forms that require you to type in a password, a secret code, or 


other sensitive information that you may not want other people to 
see as you type. Keep in mind, however, that the form data is not 
sent from the browser to the server script in a secure way, unless 
you make it secure. For more on security, contact your hosting 
company. 


The password <input> element works 
a exactly like the text <input> element, 
except the text you type is masked. 


<input type="password" name="secret"> 
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More things that can go in a form 
File input 


Here’s a whole new input element we haven’t talked about. If 
you need to send an entire file to a server script, you'll once 


again use the <input> element, but this time set its type to “file”. 


When you do that, the <input> element creates a control that 
allows you to select a file and—when the form is submitted—the 
contents of the file are sent with the rest of your form data to the 
server. Remember, your server script will need to be expecting a 
file upload, and also note that you must use the POST method to 
use this element. 


<input type="file" name="doc"> 


Multiple selection 


This isn’t an element, but rather a new way to use an element 
you already know. If you add the Boolean attribute multiple to 
your <select> element, you turn your single-choice menu into 
a multiple-choice menu. Instead of a pop-down menu, you'll get 
a multiple-choice menu that shows all the options on the screen 
(with a scroll bar if there are a lot of them); you can choose more 
than one by holding down the Ctrl (Windows) or Command 
(Mac) key as you select. 


“Choose File * 


(" Browse... 


Here’s what the file input 
element looks like in a couple 


of d ifferent browsers. 


To ereate a file input element, just set the 
type of the <input> element to “file”. 


shina “> |Buckaroo Banzai 
Selection, you Perfect Tommy 


Can Choose more 
than one option Penny Priddy 


at a time. New Jersey 
John Parker 


<select name="characters" multiple> ——N Just add the attribute 


<option value="Buckaroo">Buckaroo Banzai</option> multiple to turn a single 
<option value="Tommy">Perfect Tommy</option> selection menu into a multiple 


<option value="Penny Priddy">Penny</option> 
<option value="New Jersey">Jersey</option> 
<option value="John Parker">John</option> 


</select> 
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Placeholder 


You can use the placeholder attribute with most of the <input> 
types in a form to give the person who’s filling out the form a J Name: But 
hint about the kind of content you expect him to enter into the 


control. For instance, if you have a text field that expects a first and If you leave this field blank and 
last name, you can provide a sample first and last name using the submit the form, the placeholder 
placeholder attribute. The value in the attribute is shown in the content is NOT submitted as the 
control, but is fainter than normal content that you add to a control, value for the controll 


and as soon as you click into the text field, the placeholder text will 
disappear so it doesn’t get in the way of what you're typing. 

The placeholder attribute allows you 
a to provide a hint about the kind 
of content you're expecting in this 
part of the form. 


<input type="text" placeholder="Buckaroo Banzai"> 


Required 

This is an attribute you can use with any form control; it indicates Wagie: faciecstes: ) (eunun 

that a field is required, so you shouldn’t submit the form without 

specifying a value for the controls that have this attribute set. In QB Please fill cur this field. 
browsers that support this attribute, if you try to submit the form CC 

without specifying a value for a required field, you’ll get an error This is a sereenshot from Chrome. As 
message and the form will not be submitted to the server. of this writing, not all browsers support 
Notice that this attribute is another Boolean attribute, like we saw in required, but you Can put it there anyway. 


You'll be able to submit the form, but then 
of course, the server seript will complain 


that you haven't filled in the field. 


the <video> element. That just means that the value of the attribute 
is simply “there” or “not there.” That is, if the attribute’s there, then 
it’s set, and if the attribute’s not there, then it’s not set. So in this 
example, required is there, so that means the attribute is set and required is a Peclean.o thule: cost isin 
the field is required to submit the form. Hie foci eontrel, Hhak means the field swusk 
have a value for the form to submit correctly. 


<input type="text" placeholder="Buckaroo Banzai" required> a 


Edit your “styledform.html” file and add placeholders to each of the text <input>s and the tel <input>. Choose 
values that will give the customer a good hint about what kind of content is expected in each field. 


Next, edit the same file and add the required attribute to each form field that is required by the Starbuzz Bean 
Machine (all the “Ship to” fields). Because beans and beantype have default values, do you really need required 
on those fields? What happens if you remove the checked attribute from beantype; do you need required then? 
Experiment with different browsers and see which browsers support placeholder and required. 
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a POINTS 


The <form> element defines the form, and all form 
input elements are nested inside it. 


= The action attribute contains the URL of the 
server script. 


= The method attribute contains the method of 
sending the form data: either POST or GET. 


= APOST packages form data and sends it as part 
of the request. 


= AGET packages form data and appends it to the 
URL. 


= Use POST when the form data should be private, 
or when it is large, such as when a <textarea> or 
file <input> element is used. 


= Use GET for requests that might be bookmarked. 


= The <input> element can act as many different 
input controls on the web page, depending on the 
value of its “type” attribute. 


= Atype of “text” creates a single-line text input. 
= Atype of “submit” creates a submit button. 


= Atype of “radio” creates one radio button. All radio 
buttons with the same name make up a group of 
mutually exclusive buttons. 


= Atype of “checkbox” creates one checkbox 
control. You can create a set of choices by giving 
multiple checkboxes the same name. 


= A type of “number” creates a single-line text input 
that expects numeric characters only. 


= A type of “range” creates a slider control for 
numeric input. 


= A “color” type creates a color picker in browsers 
that support this type (and a text input otherwise). 


= A “date” type creates a date picker in browsers 
that support this type (and a text input otherwise). 


il” “ 


The “email’, “url’, and “tel” types create single- 
line text inputs that cause custom keyboards to 
appear on some mobile browsers for easier data 
entry. 


A<textarea> element creates a multiline text input 
area. 


A<select> element creates a menu, which 
contains one or more <option> elements. 
<option> elements define the items in the menu. 


If you put text into the content of a <textarea> 
element, it will become the default text in a text 
area control on the web page. 


The value attribute in the text <input> element can 
be used to give a single-line text input an initial 
value. 


Setting the value attribute on a submit button 
changes the text of the button. 


When a web form is submitted, the form data 
values are paired with their corresponding names, 
and all names and values are sent to the server. 


CSS table display is often used to lay out forms, 
given that forms have a tabular structure. CSS 
can also be used to style the form’s color, font 
styles, borders, and more. 


HTML allows form elements to be organized with 
the <fieldset> element. 


The <label> element can be used to attach labels 
to form elements in a way that aids accessibility. 


Use the placeholder attribute to give the form user 
a hint about the kind of content you expect in a 
field. 


The required attribute indicates a field is required 
for the form to be submitted correctly. Some 
browsers will force you to enter data into these 
fields before submitting the form. 
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Markup Magnets Solution 


Your job was to take the form element magnets and lay them on 
top of the corresponding controls in the sketch. You didn’t need 
all the magnets below to complete the job; some were left over. 
Here’s our solution. 


<select> ...<select> 


Chane yor bea FRE DERD eee orto | 


<input type="radio" 


<input type="radio". 


} | <input Type tee 
<input type="text" . 


Hi = <input type="text" 
Zip [| <input type="text” 


Phone: [| <input Epes 


<textarea> ...<textarea> 
<input type="submit" ...7 


We didn’t 
need these. 


v 


| input type="checkbox" 
{as .<select> — 


| SSS 
<input type="range" ...> 7 


<input type="color" 
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BE the Browser Solution 


name = “Buckaroo Banzai” 


model = 


color = 


GET or POST 


For each description, circle either GET or POST 
depending on which method would be more 
appropriate. If you think it could be either, circle 
both. But be prepared to defend your answers... 
A_form for typing in a username and password. 
A form for ordering CDs. 
A form for looking up current events. 


A form to post book reviews. 


A form for retrieving benefits by your government ID number. 


A form to send customer feedback. 
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* Hey, 80% of our customers 
ise 
Ll iON order ground beans. Can you 
i adie make it so the ground bean type 


is already selected when the 
user loads the page? 


If you add an attribute called checked with a value of “checked” 

into your radio input element, then that element will be 

selected by default when the form is displayed by the browser. 

Add the checked attribute to the “ground” radio <input> 

element and give the page a test. Here's the solution. Here's iust the relevant section 


of the form in “form. html”. 


<form action="http://starbuzzcoffee.com/processorder.php" method="POST"> 


<p>Type: <br> 


<input type="radio" name="beantype" value="whole"> Whole bean <br> 
<input type="radio" name="beantype" value="ground" checked> Ground 


</p> And here's the new attribute ae 
that seleets the “Ground’ 


</form> radio button. 
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Wouldn't it be dreamy if this 
were the end of the book? If there 
were no bullet points or puzzles or 
HTML listings or anything else? But 
that's probably just a fantasy... 


Congratulations! 
You made it to the end. 


Of course, there’s still an appendix. 


And the index. 
And the colophon. 
And then there’s the website... 


There’s no escape, really. 
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Appendix: leftovers 


* The Top Ten Topics =k 
(We Didn't Cover) 


We covered a lot of ground, and you’re almost finished 
with this book. We'll miss you, but before we let you go, we wouldn't feel 
right about sending you out into the world without a little more preparation. We 
can’t possibly fit everything you'll need to know into this relatively short chapter. 
Actually, we did originally include everything you need to know about HTML and 
CSS (not already covered by the other chapters), by reducing the type point size 
to .00004. It all fit, but nobody could read it. So, we threw most of it away, and 


kept the best bits for this Top Ten appendix. 
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#] More CSS selectors 


While you’ve already learned the most common selectors, here are a few 
more you might want to know about... 


Pseudo-elements 


You know all about pseudo-classes, and pseudo-elements are similar. 
Pseudo-elements can be used to select parts of an element that you can’t 
conveniently wrap in a <div> or a <span> or select in other ways. For 
example, the :first-letter pseudo-element can be used to select the first 
letter of the text in a block element, allowing you to create effects like initial 
caps and drop caps. You can use the :first-line pseudo-element to select 
the first line of a paragraph. Here’s how you’d use both to select the first 
letter and line of a <p> element: 


Pseudo— 
p:first-letter { o—elements use the same 


Ss ntax as Pseudo— . 
font-size: 3em; Y do—classes 


} 

ee ani Here we're making the first 
letter of the paragraph large, 
and the first line italic. 


font-style: italic; 


Attribute selectors 


Attribute selectors are exactly what they sound like: selectors that 


allow you to select elements based on attribute values. You use them 
like this: 


This selector selects all 


yy images that have a width 


attribute in their HTML. 
img[width] { border: black thin solid; } 


img[height="300"] { border: red thin solid; } sy 


image[alt~="flowers"] { border: #ccc thin solid; } This selectoy selects all ima 
mages 


t er have a height attribute 
This selector selects all images with a value of 300. 


that have an alt attribute that 


includes the word “flowers”. 
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Selecting by siblings 
You can also select elements based on their preceding sibling. For example, say you want to select 


only paragraphs that have an <h1> element preceding them, then you'd use this selector: 


Write the preceding element, a + (plus sign), 
and then the sibling element. 


hl+p { ——- This selector seleets all paragraphs that 


: ; + an <hl> element. 
font-style: italic; Colne immediately atte a 


} 
Combining selectors 


You’ve already seen examples of how selectors can be combined in this book. For instance, you 
can take a class selector and use it as part of a descendant selector, like this: 


Here we're selecting all paragraphs 
that are descendants of an element 
in the blueberry Class. 


-blueberry p { color: purple; } 


There’s a pattern here that you can use to construct quite complex selectors. Let’s step through 
how this pattern works: 


1) Start by defining the context for the element you want to select, like this: 


Lv ~ Here we're using a descendant selector 
div#greentea > blockquote where a <div> with an id “greentea” must 
be the parent of the <blockquote>. 


2] Then supply the element you want to select: 


Next, we add the <p> element as the element 
we want to select in the context of the 


divi#greentea > pacman 2 4 <blockquote>. The <p> clement must be a 
context e destendant of <blockquote>, which must be a 
De child of a <div> with an id of “greentea’. 


3 } Then specify any pseudo-classes or pseudo-elements: 


div#greentea > blockquote p:first-line { font-style: italic; } 


element, Liest—line, to 


context 
e of the paragraph. 


Then we add a pseudo- 


First |i 
That’s a quite Complex selector! Feel select only the ‘irst In 


Free to construct your own selectors 
using, this sdme method. 
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#Z Vendor-specific CSS properties 


The browser makers (in other words, vendors like Microsoft, Mozilla, the 
folks behind WebKit, and so on) often add new functionality to their 
browsers to test new features, or to implement CSS extensions that are 
being considered, but aren’t yet approved by the standards bodies. In these 
cases, vendors create CSS properties that look like this: 


Start with a dash “—” Another dash “—” 


\ 


-moz-transform S 
The vendor identifier; here, 


it’s “moz.” for Mozilla The property 


You should feel free to make use of these vendor-specific properties, but 
they aren’t necessarily intended for use in shipping products—the property 
may never be approved as a legit standard, or the vendor may change the 
implementation of the property at any time. That said, many of us need to 
be able to create pages that use the latest and greatest technology, but do so 
knowing that you’re using properties that may change. 


If you’re going to make use of these properties, then often you'll create CSS 
that looks like this: 
First, we list the general property 
in case it is supported, or gets 
div ¢ —_— supported in the future: 
transform: rotate (45deg) ; 
-webkit-transform: rotate (45deg) a. Safari é Chrome 
-moz-transform: rotate (45deg) ;4—— WMozilla KK Then we list the 
-o-transform: rotate (45deg) ; <___— Opera known vendor— 


-ms-transform: rotate (45deqg) ; specific versions. 


You can typically find these vendor-specific properties in the developer 
documentation and release notes for each browser, or by participating in the 
forums associated with each browser’s development process. 


And, if you’re wondering what the transform property really does, check out 
the “#3 CSS transforms and transitions” section on the next page. 
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#3 OSS transforms and transitions 


Using CSS, you can now do full-blown 2D and 3D transformations on 
elements. Rather than talk about it, let’s look at an example (type this 
one in; it’s worth it!). 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS Transforms and Transitions</title> 


<style> Here’s the basi¢ style for 
#box { the “box” <div> below... 
iti : absolute; ; 
position solute Vee The position is absolute (arent you glad you stuck 


top: 100px; fe 
hare: pce a with us all through that positioning chapter?). 
width: 200px; And let's give the <div> a position and size... 


height: 200px; 
background-color: red; LZ ™..and make it ved. 


} This style rule applies ONLY if the <div> is 
#box:hover { —— in the hover state...yes, you Can hover over 
transform: rotate (45deg) ; oe too! 
-webkit-transform: rotate (45deg) ; When you're hovering, Your mouse over the 
ssculihegh -moz-transform: rotate (45deqg) ; <div>, we transform the element by rotating 
This will ony -o-transform: rotate (45deqg) ; it 45 degrees. 
work in |E4+- . ’ 
(> «=-ms-transform: rotate (45deg) ; : 
; We still need browser—specific extensions for these. 
</style> 
</head> me 
SEED ree Tieidaiail sol Tinse ? 
<body> ic ™~ Here’s the <div> we're ete aes iiideitaniecnet 
<div id="box"></div> transforming, 
</body> 


</html> 


Go ahead and type this in and then give it a test drive. 
When you pass our mouse over the “box” <div>, you 


should see it transform so that it is rotated by 45 degrees. 
Now, what if we want to make that transformation 


smooth with a nice animation? That’s where transitions 


; Mouse over the <div> 
come in...so, turn the page. i it rotate! 
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We can add the transition property to the “box” <div> rule to have it 
transform to its new state over two seconds. Here’s how we do that: 


#box { 
position: absolute; 
top: 100px; 


left: 100px; The transition property says: “If the value of the transform 
width: 200px; [ property changes, transition from the current value of transtorm 


height: 200px; to the new value of 
background-color: red; 

transition: transform 2s; 

-webkit-transition: -webkit-transform 2s; 
-moz-transition: -moz-transform 2s; 
-o-transition: -o-transform 2s; 


} 


#box:hover { Pa 
transform: rotate (45deg) ; 


-webkit-transform: rotate (45deg) ; 
-moz-transform: rotate (45deg) ; 
-o-transform: rotate (45deg) ; 
-ms-transform: rotate (45deqg) ; 


} 


The value of the transition property 1s another property, in this case 
transform, anda duration, in this case two seconds. When the value of 
the specified property changes, the transition causes that change to happen 
over the specified duration, which creates an animation effect. You can 
transition other CSS properties too, like width or opacity. 


fi O 3 a ee : fe 5. = 
Ca Pon Seti eee - oa 


Two seconds 
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transform over the specified duration.” 


The default value of transform is 


nothing; that is, there is no transform. 


But when You hover Your mouse over 
the box, the value of transform is 
changed toa 4+5_degree rotation. So 
the transition from no transform to a 
45_degree rotation transform happens 


over two seconds. 


IE currently (as of 
version 9) has no support 
for transition, but may 
in version 1O. So you 
won't see the animation 


if you're using, IE. 


leftovers 


#4 Interactivity 


HTML pages don’t have to be passive documents; they can also have content that is executable. 
Executable content gives your pages behavior. You create executable content by writing 
programs or scripts using a scripting language called JavaScript. Here’s a little taste of what it 
means to put executable content into your pages. 


Here's a new HTML element, <seript>, which We're using the id of the form 
_.. 2 allows you to plate code right inside of HTML. to get a handle to the form in 
cee ad JavaSeript so we can do things with 
window.onload = init; it, like define what happens when a 
function init() { button is clicked. 
var submitButton = document.getElementById("submitButton") ; 


submitButton.onclick = validBid; 


And here’s a bit of JavaSeript that 
function validBid() { theeks a users bid to make sure it’s 


if (document.getElementById ("bid") .value > 0) { not zero dollars or less. 
document .getElementById ("theForm") .submit() ; 

} else { 

If the bid is greater than O, we 

submit: the form; otherwise, we don’t 

because it’s an error. 


return false; 
} 


</script> 


Then in HTML, you can create a form that uses this stript to check the bid before the 
form is submitted. [f the bid is more than zero, the form gets submitted. 


<form id="theForm" method="post" action="contest.php"> 


<input type="number" id="bid" value="0"><br> 


<input type="button" id="submitButton" value="Bid!"><br> 
</form> 


In JavaSeript, we can define what happens when 


the submitButton is clicked, and oct the val 
the input with the id of “id ge e value of 


What else can scripting do? 


Form input validation, like we did above, is a common and useful task that is often done with 
JavaScript (and the types of validation you can do go far beyond this example). But that’s just 
the beginning of what you can do with JavaScript...as you'll see on the next page. 
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other html5 goodies 
Interact with your pages in new ways that 
work for the desktop and mobile devices. 


*5 HTML APls and web apps ile, a 


ane ao on 

In addition to the elements that HTML5 adds, HTML5 UE eel eee rena ot 
comes with a whole new set of application programming 
interfaces (APIs for short) that are accessible through JavaScript. 
These APIs open up a whole new universe of expression and 
functionality to your web pages. Let’s look at just a few things you 
might do with them... 


With HTMLS APIs and JavaScript, you can 
create a 2D drawable surface right in your 


page; no plug-ins required. ee 
Make your pages location- e a 

aware to know where 
your users are, Show them 
what's nearby, take them 
ona scavenger hunt, give 


them directions, to bring BD “eits Gente tots 
people with common A Pi re 
interests together in the Pe Shear id a gg Use web workers to turbo-charge your JavaScript 


same area. SAAD WALLY not ried code and do some serious computation or make your 
STL AAC H meld J eh app more responsive. You can even make better use of 
| r z . 
a rE ls your user’s multicore processor! 


‘Ks Access any web service and ee oe 


bring that data back to your 
app, in near real time. 


a Cache data locally using 


prowser storage to speed No need for special 
Up mobile apps, plug-ins to play video. 


Create your own video 
Integrate your pages with playback controls 
~— Google Maps and even using HTML and 
let your users track their JavaScript. 


movement in real time. 
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Make use of browser- 
based local storage. 


Store lots of preferences and data 
for your users locally, in the browser, 


and even make it available for offline = 
access, 


The browser's clearly not just for 
boring documents anymore. With 
JavaScript, you can draw pixels 
directly into the browser. 


Super-charge your: 
forms with JavaScript 
to provide real 


Build complete video 
interactivity. { experiences that incorporate 


video in new ways. 


Use the power of JavaScript to 
do full-blown video processing 
in your browser. Create special 
effects and even directly 
manipulate video pixels. 


Motivated yet? 

You’ ll find all these 
examples in our book 
Head First HTML5 
Programming. 
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#6 More on Web Fonts 


We would have liked to have spent a lot more time on Web Fonts, so they ended up 


making our “10 things we didn’t cover,” even though we did cover them. If you’re 


using Web Fonts, there are a few more things you should know and investigate, so 
we've put together a top 10 of things you should know about Web Fonts: 


1. There are services that help take the pain out of using Web Fonts, like Google 

Web Fonts (http: //www.google.com/webfonts), Fonts.com (http://www. 

fonts.com/web-fonts), and Extensis (http: //www.extensis.com/). 
2. Browsers behave differently while they download your fonts. Some browsers 

display a backup font, while others wait for the font to be downloaded before 

rendering the text. 
3. Once you’ve downloaded a font, it is cached by your browser and not retrieved 

again the next time you encounter a page that uses it. 
4, All modern browsers ([E9+) support the Web Open Font Format (WOFTF), 

which is likely to become the Web Font standard. However, Internet Explorer 

up through version 8 supports a font standard different from all other modern 

browsers (.eot), and has a bug that prevents the browser from loading multiple 

fonts (so you can’t just list more than one font in your @font-face rule). If you 

need to support Web Fonts on IE8 and earlier, the services mentioned above 

can insulate you from having to worry about these cross-browser compatibility 

issues. 
5. There are many free fonts out there. Look for “open source fonts” to find fonts 

you can include in your web page for free. 
6. Because Web Fonts are real fonts, you can apply any styling to them just like 

you can to conventional fonts. 
7. Using Web Fonts can have some impact on the performance of your 

page, but is considered a better practice and will typically provide better OMe wry 

performance than using custom graphic images for typography. fee ey — MPY Tone gyy roy ry 

THY 

8. Limit the fonts in your @font-face rule to only the fonts used on a Sm ssleneng 

particular page. AO he ONS Beulah, a 

eek 

9. If you have existing font licenses, check with your vendor; they may “rumpy oj eee 

allow web usage. PO eee, OE hig bres 
10. As with conventional fonts, always include a fallback font in case your SOFT ree ne 

és i * an Matinee fleas i Fart ba oy 
page’s font isn’t available or an error is encountered retrieving or an feta MRE ern amt a 
decoding it. Py itscras 
bien tT ¢ Rh lady Or Rs ot i, 
=e Se Pee 
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#7 Tools for creating web pages 


Now that you know HTML and CSS, you’re in a good position to decide if tools like 
Dreamweaver, Expression Web, or Coda are for you. Some of these applications give you much 
richer editors with features like code coloring and built-in preview to make creating and editing 
your HTML and GSS easier. Some of these applications provide what-you-see-is-what-you- 

get (WYSIWYG) tools for creating web pages; we’re sure you know enough about HTML and 
browser support to know that this goal, while worthwhile, also comes up short from time to 


time. But that said, these tools also provide some very handy features, even if you’re writing a 
lot of the HTML yourself: 


= A “code” window for entering HTML and CSS with syntax checking to catch 
common mistakes and suggest common names and attributes as you type. 


= A preview-and-publish functionality that allows you to test pages before making 
them “live” on the Web. 


= A site manager that allows you to organize your site, and also keeps your local 
changes in synch with your website on the server. Note that this usually takes care of 
all the FTP work for you. 


= ~=Some provide built-in validation, so you know your page is valid as you develop it. 


These tools are also not without their downsides: 


= Sometimes these tools lag behind standards in terms of support, 
so to keep your HTML and CSS current, you may need to write 
(or edit) the HTML yourself. 


= Not all of these tools enforce strict standards, and may allow 
you to get sloppy with your HTML and CSS, so don’t forget to 
validate if the tool doesn’t provide built-in validation. 


Keep in mind that you can use a combination of simple editors along with these 
more sophisticated tools; one solution doesn’t have to fit all your needs. So use a 
page creation tool when it makes sense. 


Some tools to consider 


= = =Dreamweaver (Adobe) 

= = Hype (Tumult) 

= Coda (Panic) 

= = Microsoft Expression Web 
= Flux (The Escapers) 

= Amaya (Open source, developed by the W3C) 
= Eclipse (by the Eclipse Foundation) 


a The latest and greatest in web editors is 


always in flux, so be sure to cheek the Web 
for all the options for tools. 
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what can you do with xhtml? 


*8 XHTMLY 


We were pretty tough on XHTML in this book, with the whole 
“XHTML is over” thing. The truth is, when it comes to XHTML, it is 
only XHTML 2 and later that has died, and in fact, you can write your 
HTML5 using XHTML style if you want to. Why would you want 

to? Well, you might need to validate or transform your documents as 
XML, or you might want to support XML technologies, like SVG (you'll 
probably know if you do), that work with HTML. 


Let’s look at a sumple XHTML document and then step through the high 
points (we couldn’t possibly cover everything you need to know on this 
topic; as with all things XML, it gets complicated fast). 


! 
<!doctype html> <—— Same doetype! 


This is XML; we need to add what is 
<html xmlns="http://www.w3.org/1999/xhtm1"> = 4 known as a namespace: 


<head> 
<title>You Rock!</title> 


All elements have to be extremely well formed; note the 
ee ee ee 27 trailing /> here to close this void element. That's XML's 


</head> format for closing a void tag. 

<body> As an example, we're using 
<p>I'm kinda liking this XHTML!</p> SVG to draw a rectangle 
<svg xmlns="http: //www.w3.org/2000/svg"> L-— into our ae The details 


aren't important; what is 
important is that this is 
an XML format that lives 


<rect stroke="black" fill="blue" x="45px" y="45px" 
width="200px" height="100px" stroke-width="2" /> 


</ayg> 4 inside XML, not HTML. 
</body> We can embed XML right in the 
</html> page! Kinda cool. 
Now here’s a few things you need to consider for your XHTML pages: Closing all your elements, quotes 
around attribute values, valid nesting 
= Your page must be well-formed XML. ee al slegouds: andl ell that 


= Your page should be served with the application/xhtml+xml 


MIME type; for this, you’ll need to make sure your server is serving 
this type (either read up on this or contact your server administrator). 


m= = =Make sure to include the XHTML namespace in your <htm1> 
element (which we’ve done above). 


Like we said, with XML there’s a lot more to know and lots of things to 
watch out for. And, as always with XML, may the force be with you... 
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#9 Server-side scripting 


Many web pages are generated by applications running on a server. For example, think about 
an online order system where a server is generating pages as you step through the order process, 
or an online forum, where there’s a server generating pages based on forum messages that are 
stored in a database somewhere. We used a server application to process the form you created 
in Chapter 14 for the Starbuzz Bean Machine. 


Many hosting companies will let you create your own server applications by writing server-side 
scripts and programs. Here’s a few things server-side scripting will allow you to do: 


= Build an online store complete with products, a shopping cart, and an order system. 
= Personalize your pages for each user based on his or her preferences. 

= Deliver up-to-date news, events, and information. 

= Allow users to search your site. 

= Allow users to help build the content of your site. 


To create server applications, you'll need to know a server-side scripting or programming 
language. There are a lot of competing languages for web development, and you’re likely to get 
differing opinions on which language is best depending on who you ask. In fact, web languages 
are a little like automobiles: you can drive anything from a Prius to a Hummer, and each has its 
own strengths and weaknesses (cost, ease of use, size, economy, and so on). 


Web languages are constantly evolving; PHP, Python, Perl, Node.js, Ruby on Rails, and 
JavaServer Pages (JSPs) are all commonly used. If you’re new to programming, PHP may be 
the easiest language to start with, and there are millions of PHP-driven web pages, so you’d 
be in good company. If you have some programming experience, you may want to try JSPs 

or Python. If you’re more aligned with the Microsoft technologies, then you’ll want to look at 
VB.NET and ASP.NET as a server-side solution. And, if JavaScript is your gig, then check out 
Node.js for a whole new approach. 
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#10 Audio 


HTML gives you a standard way to play audio in your pages, without 
a plug-in, with the <audio> element. You'll find this element quite 
similar to the <video> element: 


<audio src="song.mp3" id="boombox" controls> 


Sorry but audio is not supported in your browser. 


</audio> 


Also like video, each browser implements its own look and feel for 
player controls (which typically consist of a progress bar with play, 
pause, and volume controls). 


Sadly, like video, there is no standard encoding for audio. Three 
formats are popular: MP3, WAV, and Ogg Vorbis. You'll find that 
support for these formats varies across the browser landscape (as 
of this writing, Chrome is the only browser that supports all three 
formats). 


Despite its simple functionality, the <audio> element and its 
JavaScript API give you lots of control. Using the element with 
JavaScript, you can create interesting web experiences by hiding the 
controls and managing the audio playback in your code. And with 
HTMLS5, you can now do this without the overhead of having to use 
(and learn) a plug-in (like Adobe Flash). 
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Look familiar? Yes, audio 
supports similar functionality as 
video (minus the video, obviously). 


ok 


_ Index + 


Symbols 


&amp abbreviation, 112-113 
& (ampersand) for entities, 113 
/* and */ for comments in CSS, 285 
<!-- and --> for comments in HTML, 6 
<>(angle brackets), 25 
<code> element, 114 
: (colon) in CSS rules, 259 
.. (dotdot) syntax for paths, 64-65 
""" (double quotes) 
for parent folders, 65 
<q> element and, 86-87 
@font-face rule, 322-325 
/ (forward slash) 
in closing tags, 26 
for paths, 64—65 
# (hash symbol) for id selectors, 395 
@media rules (CSS), 401, 405 
; (semicolon) in CSS rules, 259 


[ ] (square brackets) in form element names, 675 


A 


<a> elements 
changing styles of, 452-453 
creating links from elements n HTMLS, 153 
creating links with, 48-49 
in lounge.html, 47 
states of, 466 
absolute layouts, 522 
absolute paths, 136-137, 145, 159 
absolute positioning, 504-510, 528-529, 536-537 
action attribute, 650-651, 661, 692 
active link state, 453 


alt attribute, 173, 211, 242 
angle brackets (< >), 25 
anti-aliasing text, 210 
Applications folder, 12 
application/xhtml+xml MIME type, 708 
<article> element, 562-564, 572-573, 595 
<aside> element, 551, 595 
attributes 
attribute selectors, 698 
of elements, 29, 51-53 
matching to elements, 52 
in opening tags, 36 
<audio> element, 710 
“auto” margins, 502 


autoplay attribute (<video>), 583, 584 


B 


backgrounds 
background-color property, 618, 634 
background-image property, 380-383, 405 
background-position property, 383, 405 
background-repeat property, 383, 405 
colors (web pages), 206, 210 

block elements 
flowing, 473-478, 537 
planning pages with, 115 

<blockquote> elements, 90-95, 92 

<body> tags, 8, 23-24 

bold text, 335-336 

borders 
adding to <div> element structure, 424—433 
border-bottom property, 265-266, 354 
border-collapse property, 616, 634 
border-color property, 387, 389 
border-radius property, 388, 405, 411 
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borders, continued 
border-spacing (cells), 634 
border-spacing property, 516, 616, 639 
border-style property, 386 
border-width property, 387 
bottom, 265 
box model and, 369-370, 377-379, 387 
displaying in browsers, 31 
shorthand for, 442-445 
specifying corners of, 388 

bottom property, 504 

box model (CSS), 367-372 

<br> elements, 96—99, 115 

broken images in browsers, 215 


browsers, web. See web browsers 


C 


<caption> element, 634 
captions (HTML tables), 609-610 
cd (change directory) command, 130 
cells, table, 634 
character encoding, 238-240 
character entities, 112-113, 115 
charset attribute (<meta> tags), 239, 249 
checkbox controls, 692 
checkbox <input> element, 653, 663, 673-674 
checked attribute (forms), 695 
Chrome, 16 
class attributes, 301 
classes 
adding elements to, 286-291 
class attributes, 392-397 
placing <div> elements into, 421 
clear property, 495-497, 537 
closing tags, 25 
codecs, 589, 590-592 
collapsing borders, 616 
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colors 
adding to HTML tables, 618-620 
background (web pages), 206, 210 
“color” type attribute, 692 
color <input> element (forms), 656 
Color Pickers, 206, 348-349 
color property (CSS), 262, 313 
of headings, changing, 439 
naming, 343 
web colors. See web colors 
colspan attribute, 624, 634 
comments 
CSS, 285 
HTML, 6 
container file format, 589 
content area (box model), 368, 371, 372, 405 
Content Delivery Network (CDN), 591 
controls attribute (video), 584 
CSS (Cascading Style Sheets) 
box model, 367-372 
cascade, 458-463 
comments in, 285 
comparing languages with HTML, 294-295 
CSS Pocket Reference, 260, 445 
CSS table displays 
creating, 510-520 
laying out forms with, 682-685 
layouts, 522 
errors in, 297 
vs. HTML, 34-35 
inheriting styles from parent elements, 281-285 
linking pages to external stylesheets, 273-277 
properties overview, 300 
rules, 36, 259-260, 301 
selectors, 698-699 
<style> element, 29-32, 261—263 
style definitions, 42 
styling forms with, 686-687 
styling upgrade project, 362-365 
transforms and transitions, 701—702 
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updating for HTML5 elements, 554 

validating, 298-299 

vender-specific properties, 700 
cursive fonts, 315 


D 


data transfers (hosting), 125 
“date” type attribute, 692 
date <input> element (forms), 657, 671-672 
datetime attribute, 565-566 
default.htm files, 138-139, 159 
definition lists, 106 
<del> element (HTML), 353 
descendant selectors, 437-439, 466 
dir command, 131 
directions.html, 54 
directories (folders), 130 
display: table property, 516 
<div> element (HTML) 
adding styles to, 424-433 
defined, 466 
dividing pages into sections with, 417-422 
line-height property and, 440 
new HTML5 elements and, 595 
doctype definitions, 225-227, 229-230, 249 
domain names, 126-128, 159 


Dreamweaver, 6 


E 


editors, text, 16 
elements 
adding to classes, 286-291 
basics, 25-26, 36 
defined, 25 
floating, 479-482, 487-490, 497, 525-529 
form, 652-657 
height of, 430 
linking to with IDs, 151 


multiple rules for, 267 

nesting, 107—109 

new in HTMLS, 547-550 

selecting by siblings, 699 

structure, 36 

styling based on state, 453-454 
elixir.html, 54 
<em> element, 92, 114, 338 
<email> element (forms), 663 
email <input> element (forms), 657 
Embedded OpenType fonts, 325 
em units for sizing fonts, 329, 334 
encoding 

character, 238-240 

formats (video), 586-587 
entities, character, 112-114 
executable content in web pages, 703 
external stylesheets, 273-277, 301 


F 


fantasy fonts, 315 
<fieldset> element, 689, 692 
files 
creating in Mac, 12-13 
creating in Windows, 14-15 
extensions, 15 
file <input> element (forms), 690 
“file:///” protocol, 145 
file protocol, 159 
organizing in folders, 56-59 
transferring to server root folder, 129-133 
Firefox, 16 
:first-child pseudo-class, 454 
:first-letter pseudo-element, 698 
:first-line pseudo-element, 698 
fixed position elements, 537 
fixed positioning, 506, 531-534, 536 
Flash video, 592 
floated elements, 537 
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floating laying out with CSS table display, 682-685 
elements, 525-529 multiple choice menus, 690 
float property, 472, 478-482, 487-490 name attribute, 662 
inline elements, 497 placeholder attribute, 691 
layouts, 521, 525-526 required attribute, 691 
flowing block/inline elements, 473-478 server scripts, 646-647, 650-652, 660, 663 


styling with CSS, 686-687 
frozen layouts, 501—502, 537 
FTP (File Transfer Protocol), 129-132, 159 


flow of elements, 537 


:focus pseudo-class, 453 


folders 
organizing files/images in, 56-59 G 
for thumbnails, 192 
fonts (CSS) get <filename> command, 131 
changing weight of, 335-336 GET method, 678-680, 692 
colors, background vs. font, 349 GIF image format, 167-168, 172, 211 


ees =A sina Google Web Fonts, 325-327, 706 
font-family property, 279-280 ude HEME et ee° 

for Mac/Windows, 321 

properties, 312-313 H 

shorthand for, 444 

sizing, 328-334 

styling, 337-339 

Web Fonts, 325-327, 706 


<h1> element (headings), 22 

<h2> element (subheadings), 8, 22 

<head> element, 8, 23-24, 36 

<header> elements, 551, 568-571, 572-573, 595 


footers 

<footer> element (HTML5), 551, 595 header images, 523-524 

laying out, 493-496, 499 Head First HT'MLS Programming, 6, 52, 231, 593, 705 
formats Head First learning principles, xxviii 

image, 167 Head First Lounge project, 4-5 

video, 586-591 Head First Mobile Web, 403 
forms, HTML headings 

action attribute, 650, 661, 665, 692 changing color of, 439 

adding checkboxes/text area to, 673-674 levels of, 6 

adding fieldsets/legends to, 689 height properties 


adding <input> elements to, 664-666, 671-675 
adding <label> elements for accessibility, 688 
adding password <input> element to, 689 
basics, 646-649 

commonly used elements, 652-657 

file <input> element, 690 

<form> element, 649-651, 660-663, 692 

GET vs. POST methods, 678-680 hosting companies, 125, 159 


attribute, 174, 584 
CSS box model and, 366, 371 
of elements, 430 
property, 570 
hex code (colors), 32, 345-347, 349, 355 


“Hide extensions for known file types” option, 15 
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hover state, 453-454 I 
href attribute 


basics (interview), 53 id attribute, 150-153, 392-397, 405, 418 
relative paths in, 59 “Tgnore rich text commands in HTML files” option, 13 
specifying link destination with, 48-51 

HTML5 
APIs and web apps, 704—705 
browser support for, 553 
building blog with new elements, 562-569 
vs. HTML4.01, 555-556 
new elements in, 546—550, 594, 595 
specification 
doctype, 227 
overview, 231, 242 
HTML (Hypertext Markup Language) 


basics, 4 


images 
adding logo to myPod application, 202-209 
broken images in browsers, 215 
browser handling of, 164-166 
fixing broken, 66-68 
formats, 167, 211 
<img> element, 55, 170-172, 381 
<img> elements, 211 
as links, 211 
organizing in folders, 57-58 
quality of, 187 
sizing/resizing, 174, 178, 183-184 
using as list markers, 632-633 
limportant, 459, 461 
index.html file, 11, 18, 138-139, 159, 176 


comments, 6 
creating tables with. See tables, HTML 
creating web page, 9-11, 17-22 


vs. CSS, 34-35 
forms. See forms, HTML inherited properties, 301, 464 
guidelines for well-formed pages, 245-246 inheriting styles, 281-285 
Guide to, 245-246 inline elements 
-html extension, 14 basics, 94-95 
<html> tag, 6, 23 flowing, 473-478, 537 
HTML & XHTML: The Definitive Guide (O’Reilly), <q> and <em>, 115 

52 setting properties on, 450 
incorporating CSS into, 259-260 <input> elements (forms), 652-653, 656-657, 664-667, 
language vs. CSS, 294-295 670-674 
legacy elements, 247 <ins> element, 353 


living standard, 228 


j Internet Explorer, 16 
marking up page structure, 38-41 


; italic style text, 337-339 
overview, 2—3 


readability of, 6 

saving, 18 

structure for table displays, 512-514 JavaScript, 703 

structuring text with tags, 21—23 jello layouts, 502-503, 521, 537 


version history of, 222-225 
HTTP (HyperText Transfer Protocol), 135, 159 


hypertext links. See links 


JPEG images, 167—168, 172, 211 
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keywords for sizing fonts, 330, 334 
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labels 
<label> elements, 688, 692 
labeling <div> with id attribute, 418 
link, 148 
slast-child pseudo-class, 454 
layouts, CSS, 521-523 
leading (text), 366 
left property, 504 
legacy HTML elements, 247 
<legend> element, 689 
<li> elements, 101—106 
lighter font-weight property, 335 
linebreaks, 95 
line-height property, 365-366, 405, 440 
<link> element, 275-277, 301 
links 
adding titles to, 147—149 
Head First Lounge example, 44-50 
‘link pseudo-class, 455 
linking into parent folders, 63-65 
linking into subfolders, 60-62 
linking to new windows, 155-157 
linking to points in pages, 149-152 
linking within pages, 153 
link labels, 148 
link states, 453 
to other websites, 142-145 
relative, 154 
turning thumbnails into, 196-200 
liquid layouts, 501-502, 537 
lists 
list-style-mage property, 632 
list-style-position property, 633 
list-style-type property, 631 
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loop attribute (video), 584 
lossy/lossless formats (images), 167-168 
lounge.html, 54, 66 
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Mac OS X 
creating HTML files in, 12-13 
FTP applications for, 132 
specifying fonts for, 321 
margins 
box model and, 369, 371-372, 377-379 
margin-right property, 385 
settings for, 405 
shorthand for, 442—445 
markers, list, 631-632 
matching tags, 25 
matte color, setting, 206-207 
Matte option 
in Photoshop Elements, 210 
in “Save for Web” dialog box, 205 
max-device-width property, 400, 404, 412 
max-width property, 404, 412 
@media rules (CSS), 401 
media attribute, 400 
media queries, 401—402 
<meta> tags, 239-240, 249 
metacognition, Xx1x—Xxx1 
method attribute (forms), 650, 692 
MIME type, 590 
min-device-width property, 400, 404, 412 
min-width property, 404, 412 
mismatching tags, 109-110 
mission. html page, 33 
mkdir (make directory) command, 131 
monospace fonts, 315 
MP4 containers, 586-587 
multiple attribute (forms), 690 
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multiple links to stylesheets, 463 

multiple stylesheets, 399-400 

myPod application (images), 175-177, 188-191 
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name attribute (form element), 662-663 
naming 

classes/ids, 397 

colors, 343 
<nav> element (HTML5), 575-577, 595 
navigating multiple pages, 573-577 
negative property values, 533-534 
nesting 

<div> elements, 420, 466 

elements, 107-109 

lists, 115 

nested tags, 26 

tables, 634 
normal keyword, 445 
Notepad, 14 
:nth-child pseudo-class, 619, 634 
“number” type attribute, 692 
number <input> element (forms), 656, 671-672 
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oblique style text, 337-339 

Ogg container, 586-587 

<ol> element, 103-106 

online color charts, 349 

“Open and Save” tab, 13 

opening tags, 25 

OpenType fonts, 325 

Opera, 16 

<option> element (forms), 655, 663, 666, 692 
ordered lists, 102-105, 115, 633 
orientation property, 400 

overriding style inheritance, 284-285 
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<p> elements, 55, 101 
<p> tags, 8, 22 
padding 
basics, 405 
box model and, 368, 371-372, 377-379 
padding-left property, 384 
shorthand for, 442-445 
paragraphs 
linking, 55 
styling independently (box model), 375-383 
parent folders, linking into, 63-65 
password <input> element, 689 
paths (links) 
absolute, 136-137, 145 
planning, 60-65 
relative, 137, 145 
percentages 
positioning elements with, 506 
sizing fonts with, 328-329, 334 
photo images, size of, 211 
Photoshop Elements 
finding web colors with, 348-349 
Matte color menu in, 211 
resizing images with, 181 
pixels 
pixel resolutions, 179-180 
sizing fonts with, 328 
placeholder attribute (forms), 691, 692 
“Plain text”, 13 
PNG images, 167-168, 172, 203-205, 211 
ports, 145 
position property, 504—507, 537 
poster attribute (video), 584 
POST method, 678-680, 692 
<pre> element, 114 
Preferences, TextEdit, 13 
preload attribute (<video>), 584 
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of fonts, 312-313 

inherited, 301, 464 

list-style (CSS), 634 

shortcuts for, 466 
pseudo-classes, 454—456, 466, 619 
pseudo-elements, 698 
put <filename> command, 130 
pwd command (FTP), 131 


Q 


<q> elements, 86-88, 92, 117 


R 


radio buttons, 692 
radio <input> element, 653, 663, 668 
ragged borders, 389 
“range” type, 692 
range <input> element, 656 
relative font sizing, 328-329 
relative links, 154 
relative paths 
absolute paths and, 137 
basics, 69-71 
grand challenge solutions, 75-76 
vs. URLs, 145, 159 
relative positioning, 506, 536, 537 
reload button (browsers), 24 
required attribute, 692 
required attribute (forms), 691 
RGB color values 
specifying in CSS, 344 
web colors and, 340-342 
right property, 504 
root folders (server), 129-133 
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rows (HTML tables) 
adding color to, 618-620 
cells spanning multiple, 622-624 
columns and, 607 
rules, CSS 
cascade and, 459 
combining, 264 
ordering of, 293, 459 
overriding inherited styles with, 284—285 
syntax, 259-260 
writing for multiple elements, 264-266 
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Safari, 16 
sans-serif fonts, 314, 320 
saving 
HTML, 18 
images, 187 
“Save for Web” option, 183-184, 187, 204—205 
screen readers, 157 
<script> element, 703 
scripting, server-side, 709 
<section> element, 562-564, 572-573, 595 
<select> element, 692 
selecting 
elements by siblings, 699 
elements with ids/classes, 395 
<select> element, 655, 663, 665-667 
selectors (CSS) 
basics, 267 
class, 288 
combining, 698-699 
descendant, 437—439 
serif fonts, 314, 320 
server-side scripting, 651, 709 
SFTP (Secure File Transfer Protocol), 132 
shortcuts, property, 466 
shorthand, CSS, 442-445 
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sidebars, laying out, 488-490, 499 
sizing/resizing 
fonts, 312, 328-334 
images, 174, 178-184, 183-185 
<source> element, 589-591 
<span> element (HTML), 448-450, 466 
special characters, 112-113 
specificity, calculating, 460-461 
src attribute (CSS), 68-69, 170, 211, 582, 584 
Starbuzz Coffee project 
adding CSS to, 30-33 
basic structure with HTML tags, 21 
creating web page, 11-12 
loading content into browser, 17 
markup, 38 
structure, 10 
states of links, 453 
static positioning, 506, 536, 537 
<strong> element, 114 
styles 
guide to applying, 292-293 
inheriting from parent elements, 281-285 
<style> element, 29-32 
<style> element, placing, 36 
<style> tags, 261-263, 301 
stylesheets, multiple, 399-400, 405 
styling fonts, 337-339 
subfolders, linking into, 60-62 
subheadings, HTML, 22 
submit buttons, 692 
submit <input> element (forms), 652, 663 
SVG fonts, 325 
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<table> element (HTML), 634 
tables, HTML 
adding captions to, 609-610 
adding color to, 618-620 
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adding styles to, 612-616 
cells spanning multiple rows, 622-624 
collapsing borders, 616 
creating, 603-607 
CSS table displays, 537, 607 
pasting into web pages, 611 
styling lists in, 631-633 
tags, HTML 
basics, 25-42 
in Head First Lounge project, 5—6 
matching, 25 
mismatching, 109-110 
nested, 26 
Starbuzz Coffee project, 21 
starting and ending, 26 
structuring text with, 21-23, 39-41 
target attribute, 156-157, 159 
<td> element, 604-606, 624, 634, 641 
tel <input> element (forms), 657, 663 
text 
anti-aliasing, 210 
editors, 16 
flowing onto web pages, 478 
fonts. See fonts (CSS) 
text-align property, 431—433, 466, 634 
<textarea> element (forms), 654, 663, 673, 692 
text-decoration property (CSS), 267, 313, 353, 355 
TextEdit (Mac), 12-13 
text <input> element, 652, 692 
wrapping around list markers, 633 
<th> element (HTML), 604-606, 634 
thumbnails, 192-196, 211 
<time> element, 114, 565-566, 595 
<title> element, 8, 23-24 
title attribute (<a> element), 147-149 
tooltips, 153 
top property, 504 
<tr> element, 604-606 
transforms and transitions (CSS), 701—702 
transparency in images, 204—205, 210 
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TrueType fonts, 325 displaying HTML in, 3-4 
type attribute, 51, 652 displaying HTML tables, 605 
displaying HTML video, 585 
U handling of forms by, 647 
handling of images by, 164-166 
<ul> element, 103-106, 118-119 HTML version support, 228 
underlining text, 267 interpreting HTML, 5-6 
Unicode, 112-113, 239 loading content into, 17—19 
unordered lists, 102-105, 633 opening oe in, 19 
URLs (Uniform Resource Locators) pee vemhiny Loetee 
baste 144 selecting, 16 
defitied, 159 supporting HTMLS, 553 


hit d, 36 
for images, 171-172 whitespace and, 


<url> element (forms), 663 
url <input> element (forms), 657 
UTF-8 encoding, 18, 239, 249 


web colors 
basics, 340-342 
creating, 355 
finding, 348-349 


V specifying, 343-347 
Web Fonts, 325-327, 706 
validating web forms. See forms, HTML 
CSS validator, 298-299 WebM container, 586-587 


W3C Validator, 233-240 


web pages 

Walueatenibute forms) 003; 024 adding executable content to, 703 
vendor-specific CSS properties, 700 applications for creating, 707 
vertical-align property, 516, 520, 634 dividing into sections with <div> element, 417—422 
<video> element (HTML5) how the web works, 2-6 

attributes, 584 linking to external CSS stylesheets, 273-277 

basics, 580-583 opening in browsers, 19 

formats, 586-591 setting background color, 206 
:visited pseudo-class, 455 structure of, 115 
void elements, 98-99, 115, 172 web pages, constructing 

adding <blockquote> elements, 90—94 
W adding <br> element, 96-99 
adding <q> element, 86-88 

W3C Validator, 233-238, 249, 298-299 outline, 81 
web applications, HT'ML5 for, 242 overview, 79 
web browsers rough design sketch, 80 

basics, 3 testing page, 84 

broken images in, 215 web servers 

built-in default styles, 28 basics, 3 

choosing, 16 editing files on, 132 
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moving files to root folder on, 128-131 
port 80 and, 145 
requests from browsers, 138 
root folder, importance of, 129 
submitting forms to, 646-647 
websites for further information 
character encoding, 239 
CSS3 Media Queries specification, 403 
domain names, |26—127 
FTP applications, 132 
hosting companies, 125 
symbol/foreign character abbreviations, 112-113 
W3C validator, 233 
Web Fonts, 327 
weight property (CSS fonts), 335-336 
WHATWG and W3G, 591 
whitespace, use of, 36 
width attribute 
images, 174 
video, 584 
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width property 
basics, 426-430 
borders and, 387 
CSS box model and, 369, 371 
height of columns and, 520 
setting for elements, 466 
windows, linking to new, 155-157 
Windows, Microsoft 
creating HTML files in, 14-15 
FTP applications for, 132 
specifying fonts for, 321 
World Wide Web Consortium (W3C), 249 
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XML, 223, 225, 708 
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z-index property, 505-506, 537 
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Renegade: 
Adjective 
‘Having rejected tradition: Unconventional.’ 


Merriam-Webster Dictionary 


Acquiescence to tyranny is the death of the spirit 


You may be 38 years old, as I happen to be. And one day, 
some great opportunity stands before you and calls you to 
stand up for some great principle, some great issue, some 
great cause. And you refuse to do it because you are afraid 
... You refuse to do it because you want to live longer ... 
You're afraid that you will lose your job, or you are afraid 
that you will be criticised or that you will lose your 
popularity, or you're afraid that somebody will stab you, or 
shoot at you or bomb your house; so you refuse to take the 
stand. 


Well, you may go on and live until you are 90, but you’re just 
as dead at 38 as you would be at 90. And the cessation of 
breathing in your life is but the belated announcement of an 
earlier death of the spirit. 


Martin Luther King 


How the few control the many and always have — the many do 
whatever they're told 


‘Forward, the Light Brigade!’ 
Was there a man dismayed? 
Not though the soldier knew 
Someone had blundered. 
Theirs not to make reply, 
Theirs not to reason why, 
Theirs but to do and die. 
Into the valley of Death 
Rode the six hundred. 


Cannon to right of them, 
Cannon to left of them, 
Cannon in front of them 
Volleyed and thundered; 
Stormed at with shot and shell, 
Boldly they rode and well, 
Into the jaws of Death, 
Into the mouth of hell 
Rode the six hundred 


Alfred Lord Tennyson (1809-1892) 


The mist is lifting slowly 
I can see the way ahead 
And I’ve left behind the empty streets 
That once inspired my life 
And the strength of the emotion 
Is like thunder in the air 
‘Cos the promise that we made each other 
Haunts me to the end 


The secret of your beauty 
And the mystery of your soul 
I’ve been searching for in everyone I meet 
And the times I’ve been mistaken 
It’s impossible to say 
And the grass is growing 
Underneath our feet 


The words that I remember 
From my childhood still are true 
That there’s none so blind 
As those who will not see 
And to those who lack the courage 
And say it’s dangerous to try 
Well they just don’t know 
That love eternal will not be denied 


I know you're out there somewhere 
Somewhere, somewhere 
I know you're out there somewhere 


Somewhere you can hear my voice 
I know I'll find you somehow 
Somehow, somehow 
I know I'll find you somehow 
And somehow I'll return again to you 


The Moody Blues 


Are you a gutless wonder - or a Renegade Mind? 


Monuments put from pen to paper, 
Turns me into a gutless wonder, 
And if you tolerate this, 

Then your children will be next. 
Gravity keeps my head down, 
Or is it maybe shame ... 


Manic Street Preachers 


Rise like lions after slumber 

In unvanquishable number. 
Shake your chains to earth like dew 
Which in sleep have fallen on you. 

Ye are many — they are few. 


Percy Shelley 
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CHAPTER ONE 
fm thinking’ — Oh, but are you? 


Think for yourself and let others enjoy the privilege of doing so too 
Voltaire 


rench-born philosopher, mathematician and scientist René 
Descartes became famous for his statement in Latin in the 17th 
century which translates into English as: ‘I think, therefore I am.’ 


On the face of it that is true. Thought reflects perception and 
perception leads to both behaviour and self-identity. In that sense 
‘we’ are what we think. But who or what is doing the thinking and is 
thinking the only route to perception? Clearly, as we shall see, ‘we’ 
are not always the source of ‘our’ perception, indeed with regard to 
humanity as a whole this is rarely the case; and thinking is far from 
the only means of perception. Thought is the village idiot compared 
with other expressions of consciousness that we all have the 
potential to access and tap into. This has to be true when we are 
those other expressions of consciousness which are infinite in nature. 
We have forgotten this, or, more to the point, been manipulated to 
forget. 

These are not just the esoteric musings of the navel. The whole 
foundation of human control and oppression is control of 
perception. Once perception is hijacked then so is behaviour which 
is dictated by perception. Collective perception becomes collective 
behaviour and collective behaviour is what we call human society. 
Perception is all and those behind human control know that which is 


why perception is the target 24/7 of the psychopathic manipulators 
that I call the Global Cult. They know that if they dictate perception 
they will dictate behaviour and collectively dictate the nature of 
human society. They are further aware that perception is formed 
from information received and if they control the circulation of 
information they will to a vast extent direct human behaviour. 
Censorship of information and opinion has become globally Nazi- 
like in recent years and never more blatantly than since the illusory 
‘virus pandemic’ was triggered out of China in 2019 and across the 
world in 2020. Why have billions submitted to house arrest and 
accepted fascistic societies in a way they would have never believed 
possible? Those controlling the information spewing from 
government, mainstream media and Silicon Valley (all controlled by 
the same Global Cult networks) told them they were in danger from 
a ‘deadly virus’ and only by submitting to house arrest and 
conceding their most basic of freedoms could they and their families 
be protected. This monumental and provable lie became the 
perception of the billions and therefore the behaviour of the billions. In 
those few words you have the whole structure and modus operandi 
of human control. Fear is a perception — False Emotion Appearing 
Real — and fear is the currency of control. In short ... get them by the 
balls (or give them the impression that you have) and their hearts 
and minds will follow. Nothing grips the dangly bits and freezes the 
rear-end more comprehensively than fear. 


World number 1 

There are two ‘worlds’ in what appears to be one ‘world’ and the 
prime difference between them is knowledge. First we have the mass 
of human society in which the population is maintained in coldly- 
calculated ignorance through control of information and the 
‘education’ (indoctrination) system. That’s all you really need to 
control to enslave billions in a perceptual delusion in which what are 
perceived to be their thoughts and opinions are ever-repeated 
mantras that the system has been downloading all their lives 
through ‘education’, media, science, medicine, politics and academia 


in which the personnel and advocates are themselves 
overwhelmingly the perceptual products of the same repetition. 
Teachers and academics in general are processed by the same 
programming machine as everyone else, but unlike the great 
majority they never leave the ‘education’ program. It gripped them 
as students and continues to grip them as programmers of 
subsequent generations of students. The programmed become the 
programmers — the programmed programmers. The same can 
largely be said for scientists, doctors and politicians and not least 
because as the American writer Upton Sinclair said: ‘It is difficult to 
get a man to understand something when his salary depends upon 
his not understanding it.’ If your career and income depend on 
thinking the way the system demands then you will — bar a few free- 
minded exceptions — concede your mind to the Perceptual 
Mainframe that I call the Postage Stamp Consensus. This is a tiny 
band of perceived knowledge and possibility ‘taught’ (downloaded) 
in the schools and universities, pounded out by the mainstream 
media and on which all government policy is founded. Try thinking, 
and especially speaking and acting, outside of the ‘box’ of consensus 
and see what that does for your career in the Mainstream Everything 
which bullies, harasses, intimidates and ridicules the population into 
compliance. Here we have the simple structure which enslaves most 
of humanity in a perceptual prison cell for an entire lifetime and I'll 
go deeper into this process shortly. Most of what humanity is taught 
as fact is nothing more than programmed belief. American science 
fiction author Frank Herbert was right when he said: ‘Belief can be 
manipulated. Only knowledge is dangerous.’ In the ‘Covid’ age 
belief is promoted and knowledge is censored. It was always so, but 
never to the extreme of today. 


World number 2 

A ‘number 2’ is slang for ‘doing a poo’ and how appropriate that is 
when this other ‘world’ is doing just that on humanity every minute 
of every day. World number 2 is a global network of secret societies 
and semi-secret groups dictating the direction of society via 


governments, corporations and authorities of every kind. I have 
spent more than 30 years uncovering and exposing this network that 
I call the Global Cult and knowing its agenda is what has made my 
books so accurate in predicting current and past events. Secret 
societies are secret for a reason. They want to keep their hoarded 
knowledge to themselves and their chosen initiates and to hide it 
from the population which they seek through ignorance to control 
and subdue. The whole foundation of the division between World 1 
and World 2 is knowledge. What number 1 knows number 2 must not. 
Knowledge they have worked so hard to keep secret includes (a) the 
agenda to enslave humanity in a centrally-controlled global 
dictatorship, and (b) the nature of reality and life itself. The latter (b) 
must be suppressed to allow the former (a) to prevail as I shall be 
explaining. The way the Cult manipulates and interacts with the 
population can be likened to a spider’s web. The ‘spider’ sits at the 
centre in the shadows and imposes its will through the web with 
each strand represented in World number 2 by a secret society, 
satanic or semi-secret group, and in World number 1 — the world of 
the seen — by governments, agencies of government, law 
enforcement, corporations, the banking system, media 
conglomerates and Silicon Valley (Fig 1 overleaf). The spider and the 
web connect and coordinate all these organisations to pursue the 
same global outcome while the population sees them as individual 
entities working randomly and independently. At the level of the 
web governments are the banking system are the corporations are the 
media are Silicon Valley are the World Health Organization working 
from their inner cores as one unit. Apparently unconnected 
countries, corporations, institutions, organisations and people are on 
the same team pursuing the same global outcome. Strands in the web 
immediately around the spider are the most secretive and exclusive 
secret societies and their membership is emphatically restricted to 
the Cult inner-circle emerging through the generations from 
particular bloodlines for reasons I will come to. At the core of the 
core you would get them in a single room. That’s how many people 
are dictating the direction of human society and its transformation 


through the ‘Covid’ hoax and other means. As the web expands out 
from the spider we meet the secret societies that many people will be 
aware of — the Freemasons, Knights Templar, Knights of Malta, Opus 
Dei, the inner sanctum of the Jesuit Order, and such like. Note how 
many are connected to the Church of Rome and there is a reason for 
that. The Roman Church was established as a revamp, a rebranding, 
of the relocated ‘Church’ of Babylon and the Cult imposing global 
tyranny today can be tracked back to Babylon and Sumer in what is 
now Iraq. 


Figure 1: The global web through which the few control the many. (Image Neil Hague.) 


Inner levels of the web operate in the unseen away from the public 
eye and then we have what I call the cusp organisations located at 
the point where the hidden meets the seen. They include a series of 
satellite organisations answering to a secret society founded in 
London in the late 19th century called the Round Table and among 
them are the Royal Institute of International Affairs (UK, founded in 
1920); Council on Foreign Relations (US, 1921); Bilderberg Group 
(worldwide, 1954); Trilateral Commission (US/worldwide, 1972); and 
the Club of Rome (worldwide, 1968) which was created to exploit 
environmental concerns to justify the centralisation of global power 
to ‘save the planet’. The Club of Rome instigated with others the 
human-caused climate change hoax which has led to all the ‘green 


new deals’ demanding that very centralisation of control. Cusp 
organisations, which include endless ‘think tanks’ all over the world, 
are designed to coordinate a single global policy between political 
and business leaders, intelligence personnel, media organisations 
and anyone who can influence the direction of policy in their own 
sphere of operation. Major players and regular attenders will know 
what is happening — or some of it — while others come and go and 
are kept overwhelmingly in the dark about the big picture. I refer to 
these cusp groupings as semi-secret in that they can be publicly 
identified, but what goes on at the inner-core is kept very much ‘in 
house’ even from most of their members and participants through a 
fiercely-imposed system of compartmentalisation. Only let them 
know what they need to know to serve your interests and no more. 
The structure of secret societies serves as a perfect example of this 
principle. Most Freemasons never get higher than the bottom three 
levels of ‘degree’ (degree of knowledge) when there are 33 official 
degrees of the Scottish Rite. Initiates only qualify for the next higher 
‘compartment’ or degree if those at that level choose to allow them. 
Knowledge can be carefully assigned only to those considered ‘safe’. 
I went to my local Freemason’s lodge a few years ago when they 
were having an ‘open day’ to show how cuddly they were and when 
I chatted to some of them I was astonished at how little the rank and 
file knew even about the most ubiquitous symbols they use. The 
mushroom technique — keep them in the dark and feed them bullshit 
— applies to most people in the web as well as the population as a 
whole. Sub-divisions of the web mirror in theme and structure 
transnational corporations which have a headquarters somewhere in 
the world dictating to all their subsidiaries in different countries. 
Subsidiaries operate in their methodology and branding to the same 
centrally-dictated plan and policy in pursuit of particular ends. The 
Cult web functions in the same way. Each country has its own web 
as a subsidiary of the global one. They consist of networks of secret 
societies, semi-secret groups and bloodline families and their job is 
to impose the will of the spider and the global web in their particular 
country. Subsidiary networks control and manipulate the national 
political system, finance, corporations, media, medicine, etc. to 


ensure that they follow the globally-dictated Cult agenda. These 
networks were the means through which the ‘Covid’ hoax could be 
played out with almost every country responding in the same way. 


The ‘Yessir pyramid 

Compartmentalisation is the key to understanding how a tiny few 
can dictate the lives of billions when combined with a top-down 
sequence of imposition and acquiescence. The inner core of the Cult 
sits at the peak of the pyramidal hierarchy of human society (Fig 2 
overleaf). It imposes its will — its agenda for the world — on the level 
immediately below which acquiesces to that imposition. This level 
then imposes the Cult will on the level below them which acquiesces 
and imposes on the next level. Very quickly we meet levels in the 
hierarchy that have no idea there even is a Cult, but the sequence of 
imposition and acquiescence continues down the pyramid in just the 
same way. ‘I don’t know why we are doing this but the order came 
from “on-high” and so we better just do it.” Alfred Lord Tennyson 
said of the cannon fodder levels in his poem The Charge of the Light 
Brigade: ‘Theirs not to reason why; theirs but to do and die.’ The next 
line says that ‘into the valley of death rode the six hundred’ and they 
died because they obeyed without question what their perceived 
‘superiors’ told them to do. In the same way the population 
capitulated to “‘Covid’. The whole hierarchical pyramid functions 
like this to allow the very few to direct the enormous many. 
Eventually imposition-acquiescence-imposition-acquiescence comes 
down to the mass of the population at the foot of the pyramid. If 
they acquiesce to those levels of the hierarchy imposing on them 
(governments/law enforcement/doctors/media) a circuit is 
completed between the population and the handful of super- 
psychopaths in the Cult inner core at the top of the pyramid. 
Without a circuit-breaking refusal to obey, the sequence of 
imposition and acquiescence allows a staggeringly few people to 
impose their will upon the entirety of humankind. We are looking at 
the very sequence that has subjugated billions since the start of 2020. 
Our freedom has not been taken from us. Humanity has given it 


away. Fascists do not impose fascism because there are not enough 
of them. Fascism is imposed by the population acquiescing to 
fascism. Put another way allowing their perceptions to be 
programmed to the extent that leads to the population giving their 
freedom away by giving their perceptions — their mind — away. If this 
circuit is not broken by humanity ceasing to cooperate with their 
own enslavement then nothing can change. For that to happen 
people have to critically think and see through the lies and window 
dressing and then summon the backbone to act upon what they see. 
The Cult spends its days working to stop either happening and its 
methodology is systematic and highly detailed, but it can be 
overcome and that is what this book is all about. 


Figure 2: The simple sequence of imposition and compliance that allows a handful of people 
at the peak of the pyramid to dictate the lives of billions. 


The Life Program 

Okay, back to world number 1 or the world of the ‘masses’. Observe 
the process of what we call ‘life’ and it is a perceptual download 
from cradle to grave. The Cult has created a global structure in 
which perception can be programmed and the program continually 
topped-up with what appears to be constant confirmation that the 
program is indeed true reality. The important word here is ‘appears’. 


This is the structure, the fly-trap, the Postage Stamp Consensus or 
Perceptual Mainframe, which represents that incredibly narrow 
band of perceived possibility delivered by the ‘education’ system, 
mainstream media, science and medicine. From the earliest age the 
download begins with parents who have themselves succumbed to 
the very programming their children are about to go through. Most 
parents don’t do this out of malevolence and mostly it is quite the 
opposite. They do what they believe is best for their children and 
that is what the program has told them is best. Within three or four 
years comes the major transition from parental programming to full- 
blown state (Cult) programming in school, college and university 
where perceptually-programmed teachers and academics pass on 
their programming to the next generations. Teachers who resist are 
soon marginalised and their careers ended while children who resist 
are called a problem child for whom Ritalin may need to be 
prescribed. A few years after entering the ‘world’ children are under 
the control of authority figures representing the state telling them 
when they have to be there, when they can leave and when they can 
speak, eat, even go to the toilet. This is calculated preparation for a 
lifetime of obeying authority in all its forms. Reflex-action fear of 
authority is instilled by authority from the start. Children soon learn 
the carrot and stick consequences of obeying or defying authority 
which is underpinned daily for the rest of their life. Fortunately I 
daydreamed through this crap and never obeyed authority simply 
because it told me to. This approach to my alleged ‘betters’ continues 
to this day. There can be consequences of pursuing open-minded 
freedom in a world of closed-minded conformity. I spent a lot of time 
in school corridors after being ejected from the classroom for not 
taking some of it seriously and now I spend a lot of time being 
ejected from Facebook, YouTube and Twitter. But I can tell you that 
being true to yourself and not compromising your self-respect is far 
more exhilarating than bowing to authority for authority’s sake. You 
don’t have to be a sheep to the shepherd (authority) and the sheep 
dog (fear of not obeying authority). 


The perceptual download continues throughout the formative 
years in school, college and university while script-reading 
‘teachers’, ‘academics’ ‘scientists’, ‘doctors’ and ‘journalists’ insist 
that ongoing generations must be as programmed as they are. 
Accept the program or you will not pass your ‘exams’ which confirm 
your ‘degree’ of programming. It is tragic to think that many parents 
pressure their offspring to work hard at school to download the 
program and qualify for the next stage at college and university. The 
late, great, American comedian George Carlin said: ‘Here’s a bumper 
sticker I’d like to see: We are proud parents of a child who has 
resisted his teachers’ attempts to break his spirit and bend him to the 
will of his corporate masters.’ Well, the best of luck finding many of 
those, George. Then comes the moment to leave the formal 
programming years in academia and enter the ‘adult’ world of work. 
There you meet others in your chosen or prescribed arena who went 
through the same Postage Stamp Consensus program before you 
did. There is therefore overwhelming agreement between almost 
everyone on the basic foundations of Postage Stamp reality and the 
rejection, even contempt, of the few who have a mind of their own 
and are prepared to use it. This has two major effects. Firstly, the 
consensus confirms to the programmed that their download is really 
how things are. I mean, everyone knows that, right? Secondly, the 
arrogance and ignorance of Postage Stamp adherents ensure that 
anyone questioning the program will have unpleasant consequences 
for seeking their own truth and not picking their perceptions from 
the shelf marked: ‘Things you must believe without question and if 
you don’t you're a dangerous lunatic conspiracy theorist and a 
harebrained nutter’. 


Every government, agency and corporation is founded on the 
same Postage Stamp prison cell and you can see why so many 
people believe the same thing while calling it their own ‘opinion’. 
Fusion of governments and corporations in pursuit of the same 
agenda was the definition of fascism described by Italian dictator 
Benito Mussolini. The pressure to conform to perceptual norms 
downloaded for a lifetime is incessant and infiltrates society right 


down to family groups that become censors and condemners of their 
own ‘black sheep’ for not, ironically, being sheep. We have seen an 
explosion of that in the ‘Covid’ era. Cult-owned global media 
unleashes its propaganda all day every day in support of the Postage 
Stamp and targets with abuse and ridicule anyone in the public eye 
who won't bend their mind to the will of the tyranny. Any response 
to this is denied (certainly in my case). They don’t want to give a 
platform to expose official lies. Cult-owned-and-created Internet 
giants like Facebook, Google, YouTube and Twitter delete you for 
having an unapproved opinion. Facebook boasts that its AI censors 
delete 97-percent of ‘hate speech’ before anyone even reports it. 
Much of that ‘hate speech’ will simply be an opinion that Facebook 
and its masters don’t want people to see. Such perceptual oppression 
is widely known as fascism. Even Facebook executive Benny 
Thomas, a ‘CEO Global Planning Lead’, said in comments secretly 
recorded by investigative journalism operation Project Veritas that 
Facebook is ‘too powerful’ and should be broken up: 


| mean, no king in history has been the ruler of two billion people, but Mark Zuckerberg is ... 
And he’s 36. That’s too much for a 36-year-old ... You should not have power over two billion 
people. | just think that’s wrong. 


Thomas said Facebook-owned platforms like Instagram, Oculus, and 
WhatsApp needed to be separate companies. ‘It’s too much power 
when they’re all one together’. That’s the way the Cult likes it, 
however. We have an executive of a Cult organisation in Benny 
Thomas that doesn’t know there is a Cult such is the 
compartmentalisation. Thomas said that Facebook and Google ‘are 
no longer companies, they’re countries’. Actually they are more 
powerful than countries on the basis that if you control information 
you control perception and control human society. 


Another expression of this psychological trickery is for those who 
realise they are being pressured into compliance to eventually 


convince themselves to believe the official narratives to protect their 
self-respect from accepting the truth that they have succumbed to 
meek and subservient compliance. Such people become some of the 
most vehement defenders of the system. You can see them 
everywhere screaming abuse at those who prefer to think for 
themselves and by doing so reminding the compliers of their own 
capitulation to conformity. “You are talking dangerous nonsense you 
Covidiot!!’ Are you trying to convince me or yourself? It is a potent 
form of Stockholm syndrome which is defined as: ‘A psychological 
condition that occurs when a victim of abuse identifies and attaches, 
or bonds, positively with their abuser.’ An example is hostages 
bonding and even ‘falling in love’ with their kidnappers. The 
syndrome has been observed in domestic violence, abused children, 
concentration camp inmates, prisoners of war and many and various 
Satanic cults. These are some traits of Stockholm syndrome listed at 
goodtherapy.org: 


e Positive regard towards perpetrators of abuse or captor [see 
‘Covid’]. 

e Failure to cooperate with police and other government authorities 
when it comes to holding perpetrators of abuse or kidnapping 
accountable [or in the case of ‘Covid’ cooperating with the police 
to enforce and defend their captors’ demands]. 

e Little or no effort to escape [see ‘Covid’]. 


¢ Belief in the goodness of the perpetrators or kidnappers [see 
‘Covid’]. 

e Appeasement of captors. This is a manipulative strategy for 
maintaining one’s safety. As victims get rewarded — perhaps with 
less abuse or even with life itself — their appeasing behaviours are 
reinforced [see ‘Covid’]. 


e Learned helplessness. This can be akin to ‘if you can’t beat “em, 
join ‘em’. As the victims fail to escape the abuse or captivity, they 
may start giving up and soon realize it’s just easier for everyone if 
they acquiesce all their power to their captors [see ‘Covid’]. 


Feelings of pity toward the abusers, believing they are actually 

victims themselves. Because of this, victims may go on a crusade 

or mission to ‘save’ [protect] their abuser [see the venom 

unleashed on those challenging the official ‘Covid’ narrative]. 

¢ Unwillingness to learn to detach from their perpetrators and heal. 
In essence, victims may tend to be less loyal to themselves than to 
their abuser [ definitely see ‘Covid’]. 


Ponder on those traits and compare them with the behaviour of 
great swathes of the global population who have defended 
governments and authorities which have spent every minute 
destroying their lives and livelihoods and those of their children and 
grandchildren since early 2020 with fascistic lockdowns, house arrest 
and employment deletion to ‘protect’ them from a ‘deadly virus’ that 
their abusers’ perceptually created to bring about this very outcome. 
We are looking at mass Stockholm syndrome. All those that agree to 
concede their freedom will believe those perceptions are originating 
in their own independent ‘mind’ when in fact by conceding their 
reality to Stockholm syndrome they have by definition conceded any 
independence of mind. Listen to the ‘opinions’ of the acquiescing 
masses in this ‘Covid’ era and what gushes forth is the repetition of 
the official version of everything delivered unprocessed, unfiltered 
and unquestioned. The whole programming dynamic works this 
way. I must be free because I’m told that Iam and so I think that I 
am. 

You can see what I mean with the chapter theme of ‘I’m thinking — 
Oh, but are you?’ The great majority are not thinking, let alone for 
themselves. They are repeating what authority has told them to 
believe which allows them to be controlled. Weaving through this 
mentality is the fear that the ‘conspiracy theorists’ are right and this 
again explains the often hysterical abuse that ensues when you dare 
to contest the official narrative of anything. Denial is the mechanism 
of hiding from yourself what you don’t want to be true. Telling 
people what they want to hear is easy, but it’s an infinitely greater 
challenge to tell them what they would rather not be happening. 


One is akin to pushing against an open door while the other is met 
with vehement resistance no matter what the scale of evidence. I 
don’t want it to be true so I’ll convince myself that it’s not. Examples 
are everywhere from the denial that a partner is cheating despite all 
the signs to the reflex-action rejection of any idea that world events 
in which country after country act in exactly the same way are 
centrally coordinated. To accept the latter is to accept that a force of 
unspeakable evil is working to destroy your life and the lives of your 
children with nothing too horrific to achieve that end. Who the heck 
wants that to be true? But if we don’t face reality the end is duly 
achieved and the consequences are far worse and ongoing than 
breaking through the walls of denial today with the courage to make 
a stand against tyranny. 


A crucial aspect of perceptual programming is to portray a world in 
which everything is random and almost nothing is connected to 
anything else. Randomness cannot be coordinated by its very nature 
and once you perceive events as random the idea they could be 
connected is waved away as the rantings of the tinfoil-hat brigade. 
You can’t plan and coordinate random you idiot! No, you can’t, but 
you can hide the coldly-calculated and long-planned behind the 
illusion of randomness. A foundation manifestation of the Renegade 
Mind is to scan reality for patterns that connect the apparently 
random and turn pixels and dots into pictures. This is the way I 
work and have done so for more than 30 years. You look for 
similarities in people, modus operandi and desired outcomes and 
slowly, then ever quicker, the picture forms. For instance: There 
would seem to be no connection between the ‘Covid pandemic’ hoax 
and the human-caused global-warming hoax and yet they are masks 
(appropriately) on the same face seeking the same outcome. Those 
pushing the global warming myth through the Club of Rome and 
other Cult agencies are driving the lies about ‘Covid’ — Bill Gates is 
an obvious one, but they are endless. Why would the same people be 
involved in both when they are clearly not connected? Oh, but they 


are. Common themes with personnel are matched by common goals. 
The ‘solutions’ to both ‘problems’ are centralisation of global power 
to impose the will of the few on the many to ‘save’ humanity from 
‘Covid’ and save the planet from an ‘existential threat’ (we need 
‘zero Covid’ and ‘zero carbon emissions’). These, in turn, connect 
with the ‘dot’ of globalisation which was coined to describe the 
centralisation of global power in every area of life through incessant 
political and corporate expansion, trading blocks and superstates 
like the European Union. If you are the few and you want to control 
the many you have to centralise power and decision-making. The 
more you centralise power the more power the few at the centre will 
have over the many; and the more that power is centralised the more 
power those at the centre have to centralise even quicker. The 
momentum of centralisation gets faster and faster which is exactly 
the process we have witnessed. In this way the hoaxed ‘pandemic’ 
and the fakery of human-caused global warming serve the interests 
of globalisation and the seizure of global power in the hands of the 
Cult inner-circle which is behind ‘Covid’, ‘climate change’ and 
globalisation. At this point random ‘dots’ become a clear and 
obvious picture or pattern. 

Klaus Schwab, the classic Bond villain who founded the Cult’s 
Gates-funded World Economic Forum, published a book in 2020, The 
Great Reset, in which he used the ‘problem’ of ‘Covid’ to justify a 
total transformation of human society to ‘save’ humanity from 
‘climate change’. Schwab said: “The pandemic represents a rare but 
narrow window of opportunity to reflect, reimagine, and reset our 
world.’ What he didn’t mention is that the Cult he serves is behind 
both hoaxes as I show in my book The Answer. He and the Cult don’t 
have to reimagine the world. They know precisely what they want 
and that’s why they destroyed human society with ‘Covid’ to ‘build 
back better’ in their grand design. Their job is not to imagine, but to 
get humanity to imagine and agree with their plans while believing 
it’s all random. It must be pure coincidence that ‘The Great Reset’ 
has long been the Cult’s code name for the global imposition of 
fascism and replaced previous code-names of the ‘New World 


Order’ used by Cult frontmen like Father George Bush and the ‘New 
Order of the Ages’ which emerged from Freemasonry and much 
older secret societies. New Order of the Ages appears on the reverse 
of the Great Seal of the United States as ‘Novus ordo seclorum’ 
underneath the Cult symbol used since way back of the pyramid and 
all seeing-eye (Fig 3). The pyramid is the hierarchy of human control 
headed by the illuminated eye that symbolises the force behind the 
Cult which I will expose in later chapters. The term ‘Annuit Coeptis’ 
translates as ‘He favours our undertaking’. We are told the ‘He’ is 
the Christian god, but ‘He’ is not as I will be explaining. 


Figure 3: The all-seeing eye of the Cult ‘god’ on the Freemason-designed Great Seal of the 
United States and also on the dollar bill. 


Having you on 

Two major Cult techniques of perceptual manipulation that relate to 
all this are what I have called since the 1990s Problem-Reaction- 
Solution (PRS) and the Totalitarian Tiptoe (TT). They can be 
uncovered by the inquiring mind with a simple question: Who 
benefits? The answer usually identifies the perpetrators of a given 
action or happening through the concept of ‘he who most benefits 
from a crime is the one most likely to have committed it’. The Latin 
‘Cue bono?’ — Who benefits? — is widely attributed to the Roman 
orator and statesman Marcus Tullius Cicero. No wonder it goes back 
so far when the concept has been relevant to human behaviour since 


history was recorded. Problem-Reaction-Solution is the technique 
used to manipulate us every day by covertly creating a problem (or 
the illusion of one) and offering the solution to the problem (or the 
illusion of one). In the first phase you create the problem and blame 
someone or something else for why it has happened. This may relate 
to a financial collapse, terrorist attack, war, global warming or 
pandemic, anything in fact that will allow you to impose the 
‘solution’ to change society in the way you desire at that time. The 
‘problem’ doesn’t have to be real. PRS is manipulation of perception 
and all you need is the population to believe the problem is real. 
Human-caused global warming and the ‘Covid pandemic’ only have 
to be perceived to be real for the population to accept the ‘solutions’ of 
authority. I refer to this technique as NO-Problem-Reaction-Solution. 
Billions did not meekly accept house arrest from early 2020 because 
there was a real deadly ‘Covid pandemic’ but because they 
perceived — believed — that to be the case. The antidote to Problem- 
Reaction-Solution is to ask who benefits from the proposed solution. 
Invariably it will be anyone who wants to justify more control 
through deletion of freedom and centralisation of power and 
decision-making. 

The two world wars were Problem-Reaction-Solutions that 
transformed and realigned global society. Both were manipulated 
into being by the Cult as I have detailed in books since the mid- 
1990s. They dramatically centralised global power, especially World 
War Two, which led to the United Nations and other global bodies 
thanks to the overt and covert manipulations of the Rockefeller 
family and other Cult bloodlines like the Rothschilds. The UN is a 
stalking horse for full-blown world government that I will come to 
shortly. The land on which the UN building stands in New York was 
donated by the Rockefellers and the same Cult family was behind 
Big Pharma scalpel and drug ‘medicine’ and the creation of the 
World Health Organization as part of the UN. They have been 
stalwarts of the eugenics movement and funded Hitler’s race-purity 
expert’ Ernst Rudin. The human-caused global warming hoax has 
been orchestrated by the Club of Rome through the UN which is 


manufacturing both the ‘problem’ through its Intergovernmental 
Panel on Climate Change and imposing the ‘solution’ through its 
Agenda 21 and Agenda 2030 which demand the total centralisation 
of global power to ‘save the world’ from a climate hoax the United 
Nations is itself perpetrating. What a small world the Cult can be 
seen to be particularly among the inner circles. The bedfellow of 
Problem-Reaction-Solution is the Totalitarian Tiptoe which became 
the Totalitarian Sprint in 2020. The technique is fashioned to hide the 
carefully-coordinated behind the cover of apparently random events. 
You start the sequence at ‘A’ and you know you are heading for ‘Z’. 
You don’t want people to know that and each step on the journey is 
presented as a random happening while all the steps strung together 
lead in the same direction. The speed may have quickened 
dramatically in recent times, but you can still see the incremental 
approach of the Tiptoe in the case of ‘Covid’ as each new imposition 
takes us deeper into fascism. Tell people they have to do this or that 
to get back to ‘normal’, then this and this and this. With each new 
demand adding to the ones that went before the population’s 
freedom is deleted until it disappears. The spider wraps its web 
around the flies more comprehensively with each new diktat. I’ll 
highlight this in more detail when I get to the ‘Covid’ hoax and how 
it has been pulled off. Another prime example of the Totalitarian 
Tiptoe is how the Cult-created European Union went from a ‘free- 
trade zone’ to a centralised bureaucratic dictatorship through the 
Tiptoe of incremental centralisation of power until nations became 
mere administrative units for Cult-owned dark suits in Brussels. 


The antidote to ignorance is knowledge which the Cult seeks 
vehemently to deny us, but despite the systematic censorship to that 
end the Renegade Mind can overcome this by vociferously seeking 
out the facts no matter the impediments put in the way. There is also 
a method of thinking and perceiving — knowing — that doesn’t even 
need names, dates, place-type facts to identify the patterns that 
reveal the story. I’ll get to that in the final chapter. All you need to 
know about the manipulation of human society and to what end is 
still out there — at the time of writing — in the form of books, videos 


and websites for those that really want to breach the walls of 
programmed perception. To access this knowledge requires the 
abandonment of the mainstream media as a source of information in 
the awareness that this is owned and controlled by the Cult and 
therefore promotes mass perceptions that suit the Cult. Mainstream 
media lies all day, every day. That is its function and very reason for 
being. Where it does tell the truth, here and there, is only because the 
truth and the Cult agenda very occasionally coincide. If you look for 
fact and insight to the BBC, CNN and virtually all the rest of them 
you are asking to be conned and perceptually programmed. 


Events seem random when you have no idea where the world is 
being taken. Once you do the random becomes the carefully 
planned. Know the outcome and you'll see the journey is a phrase I 
have been using for a long time to give context to daily happenings 
that appear unconnected. Does a problem, or illusion of a problem, 
trigger a proposed ‘solution’ that further drives society in the 
direction of the outcome? Invariably the answer will be yes and the 
random — abracadabra — becomes the clearly coordinated. So what is 
this outcome that unlocks the door to a massively expanded 
understanding of daily events? I will summarise its major aspects — 
the fine detail is in my other books — and those new to this 
information will see that the world they thought they were living in 
is a very different place. The foundation of the Cult agenda is the 
incessant centralisation of power and all such centralisation is 
ultimately in pursuit of Cult control on a global level. I have 
described for a long time the planned world structure of top-down 
dictatorship as the Hunger Games Society. The term obviously 
comes from the movie series which portrayed a world in which a 
few living in military-protected hi-tech luxury were the overlords of 
a population condemned to abject poverty in isolated ‘sectors’ that 
were not allowed to interact. ‘Covid’ lockdowns and travel bans 
anyone? The ‘Hunger Games’ pyramid of structural control has the 
inner circle of the Cult at the top with pretty much the entire 


population at the bottom under their control through dependency 
for survival on the Cult. The whole structure is planned to be 
protected and enforced by a military-police state (Fig 4). 


Here you have the reason for the global lockdowns of the fake 
pandemic to coldly destroy independent incomes and livelihoods 
and make everyone dependent on the ‘state’ (the Cult that controls 
the ‘states’). I have warned in my books for many years about the 
plan to introduce a ‘guaranteed income’ — a barely survivable 
pittance — designed to impose dependency when employment was 
destroyed by AI technology and now even more comprehensively at 
great speed by the ‘Covid’ scam. Once the pandemic was played and 
lockdown consequences began to delete independent income the 
authorities began to talk right on cue about the need for a 
guaranteed income and a ‘Great Reset’. Guaranteed income will be 
presented as benevolent governments seeking to help a desperate 
people — desperate as a direct result of actions of the same 
governments. The truth is that such payments are a trap. You will 
only get them if you do exactly what the authorities demand 
including mass vaccination (genetic manipulation). We have seen 
this theme already in Australia where those dependent on 
government benefits have them reduced if parents don’t agree to 
have their children vaccinated according to an insane health- 
destroying government-dictated schedule. Calculated economic 
collapse applies to governments as well as people. The Cult wants 
rid of countries through the creation of a world state with countries 
broken up into regions ruled by a world government and super 
states like the European Union. Countries must be bankrupted, too, 
to this end and it’s being achieved by the trillions in ‘rescue 
packages’ and furlough payments, trillions in lost taxation, and 
money-no-object spending on ‘Covid’ including constant all- 
medium advertising (programming) which has made the media 
dependent on government for much of its income. The day of 
reckoning is coming — as planned — for government spending and 
given that it has been made possible by printing money and not by 
production/taxation there is inflation on the way that has the 


potential to wipe out monetary value. In that case there will be no 
need for the Cult to steal your money. It just won't be worth 
anything (see the German Weimar Republic before the Nazis took 
over). Many have been okay with lockdowns while getting a 
percentage of their income from so-called furlough payments 
without having to work. Those payments are dependent, however, 
on people having at least a theoretical job with a business considered 
non-essential and ordered to close. As these business go under 
because they are closed by lockdown after lockdown the furlough 
stops and it will for everyone eventually. Then what? The ‘then 
what?’ is precisely the idea. 
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Figure 4: The Hunger Games Society structure | have long warned was planned and now the 
‘Covid’ hoax has made it possible. This is the real reason for lockdowns. 


Between the Hunger Games Cult elite and the dependent population 
is planned to be a vicious military-police state (a fusion of the two 
into one force). This has been in the making for a long time with 
police looking ever more like the military and carrying weapons to 
match. The pandemic scam has seen this process accelerate so fast as 


lockdown house arrest is brutally enforced by carefully recruited 
fascist minds and gormless system-servers. The police and military 
are planned to merge into a centrally-directed world army ina 
global structure headed by a world government which wouldn't be 
elected even by the election fixes now in place. The world army is 
not planned even to be human and instead wars would be fought, 
primarily against the population, using robot technology controlled 
by artificial intelligence. I have been warning about this for decades 
and now militaries around the world are being transformed by this 
very AI technology. The global regime that I describe is a particular 
form of fascism known as a technocracy in which decisions are not 
made by clueless and co-opted politicians but by unelected 
technocrats — scientists, engineers, technologists and bureaucrats. 
Cult-owned-and-controlled Silicon Valley giants are examples of 
technocracy and they already have far more power to direct world 
events than governments. They are with their censorship selecting 
governments. I know that some are calling the ‘Great Reset’ a 
Marxist communist takeover, but fascism and Marxism are different 
labels for the same tyranny. Tell those who lived in fascist Germany 
and Stalinist Russia that there was a difference in the way their 
freedom was deleted and their lives controlled. I could call it a fascist 
technocracy or a Marxist technocracy and they would be equally 
accurate. The Hunger Games society with its world government 
structure would oversee a world army, world central bank and single 
world cashless currency imposing its will on a microchipped 
population (Fig 5). Scan its different elements and see how the 
illusory pandemic is forcing society in this very direction at great 
speed. Leaders of 23 countries and the World Health Organization 
(WHO) backed the idea in March, 2021, of a global treaty for 
‘international cooperation’ in ‘health emergencies’ and nations 
should ‘come together as a global community for peaceful 
cooperation that extends beyond this crisis’. Cut the Orwellian 
bullshit and this means another step towards global government. 
The plan includes a cashless digital money system that I first warned 
about in 1993. Right at the start of “Covid’ the deeply corrupt Tedros 


Adhanom Ghebreyesus, the crooked and merely gofer ‘head’ of the 
World Health Organization, said it was possible to catch the ‘virus’ 
by touching cash and it was better to use cashless means. The claim 
was ridiculous nonsense and like the whole ‘Covid’ mind-trick it 
was nothing to do with ‘health’ and everything to do with pushing 
every aspect of the Cult agenda. As a result of the Tedros lie the use 
of cash has plummeted. The Cult script involves a single world 
digital currency that would eventually be technologically embedded 
in the body. China is a massive global centre for the Cult and if you 
watch what is happening there you will know what is planned for 
everywhere. The Chinese government is developing a digital 
currency which would allow fines to be deducted immediately via 
Al for anyone caught on camera breaking its fantastic list of laws 
and the money is going to be programmable with an expiry date to 
ensure that no one can accrue wealth except the Cult and its 
operatives. 
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Figure 5: The structure of global control the Cult has been working towards for so long and 
this has been enormously advanced by the ‘Covid’ illusion. 


Seridom is so smart 

The Cult plan is far wider, extreme, and more comprehensive than 
even most conspiracy researchers appreciate and I will come to the 
true depths of deceit and control in the chapters ‘Who controls the 


Cult?’ and ‘Escaping Wetiko’. Even the world that we know is crazy 
enough. We are being deluged with ever more sophisticated and 
controlling technology under the heading of ‘smart’. We have smart 
televisions, smart meters, smart cards, smart cars, smart driving, 
smart roads, smart pills, smart patches, smart watches, smart skin, 
smart borders, smart pavements, smart streets, smart cities, smart 
communities, smart environments, smart growth, smart planet ... 
smart everything around us. Smart technologies and methods of 
operation are designed to interlock to create a global Smart Grid 
connecting the entirety of human society including human minds to 
create a centrally-dictated ‘hive’ mind. ‘Smart cities’ is code for 
densely-occupied megacities of total surveillance and control 
through AI. Ever more destructive frequency communication 
systems like 5G have been rolled out without any official testing for 
health and psychological effects (colossal). 5G/6G/7G systems are 
needed to run the Smart Grid and each one becomes more 
destructive of body and mind. Deleting independent income is 
crucial to forcing people into these Al-policed prisons by ending 
private property ownership (except for the Cult elite). The Cult’s 
Great Reset now openly foresees a global society in which no one 
will own any possessions and everything will be rented while the 
Cult would own literally everything under the guise of government 
and corporations. The aim has been to use the lockdowns to destroy 
sources of income on a mass scale and when the people are destitute 
and in unrepayable amounts of debt (problem) Cult assets come 
forward with the pledge to write-off debt in return for handing over 
all property and possessions (solution). Everything — literally 
everything including people — would be connected to the Internet 
via AI. I was warning years ago about the coming Internet of Things 
(loT) in which all devices and technology from your car to your 
fridge would be plugged into the Internet and controlled by AI. 
Now we are already there with much more to come. The next stage 
is the Internet of Everything (IoE) which is planned to include the 
connection of AI to the human brain and body to replace the human 
mind with a centrally-controlled AI mind. Instead of perceptions 


being manipulated through control of information and censorship 
those perceptions would come direct from the Cult through AI. 
What do you think? You think whatever AI decides that you think. 
In human terms there would be no individual ‘think’ any longer. Too 
incredible? The ravings of a lunatic? Not at all. Cult-owned crazies 
in Silicon Valley have been telling us the plan for years without 
explaining the real motivation and calculated implications. These 
include Google executive and ‘futurist’ Ray Kurzweil who highlights 
the year 2030 for when this would be underway. He said: 


Our thinking ... will be a hybrid of biological and non-biological thinking ... humans will be 
able to extend their limitations and ‘think in the cloud’ ... We’re going to put gateways to the 
cloud in our brains ... We're going to gradually merge and enhance ourselves ... In my view, 
that’s the nature of being human — we transcend our limitations. 


As the technology becomes vastly superior to what we are then the small proportion that is 
still human gets smaller and smaller and smaller until it’s just utterly negligible. 


The sales-pitch of Kurzweil and Cult-owned Silicon Valley is that 
this would make us ‘super-human’ when the real aim is to make us 
post-human and no longer ‘human’ in the sense that we have come 
to know. The entire global population would be connected to AI and 
become the centrally-controlled ‘hive-mind’ of externally-delivered 
perceptions. The Smart Grid being installed to impose the Cult’s will 
on the world is being constructed to allow particular locations — even 
one location — to control the whole global system. From these prime 
control centres, which absolutely include China and Israel, anything 
connected to the Internet would be switched on or off and 
manipulated at will. Energy systems could be cut, communication 
via the Internet taken down, computer-controlled driverless 
autonomous vehicles driven off the road, medical devices switched 
off, the potential is limitless given how much AI and Internet 
connections now run human society. We have seen nothing yet if we 
allow this to continue. Autonomous vehicle makers are working 
with law enforcement to produce cars designed to automatically pull 
over if they detect a police or emergency vehicle flashing from up to 
100 feet away. At a police stop the car would be unlocked and the 


window rolled down automatically. Vehicles would only take you 
where the computer (the state) allowed. The end of petrol vehicles 
and speed limiters on all new cars in the UK and EU from 2022 are 
steps leading to electric computerised transport over which 
ultimately you have no control. The picture is far bigger even than 
the Cult global network or web and that will become clear when I 
get to the nature of the ‘spider’. There is a connection between all 
these happenings and the instigation of DNA-manipulating 
‘vaccines’ (which aren’t ‘vaccines’) justified by the ‘Covid’ hoax. That 
connection is the unfolding plan to transform the human body from 
a biological to a synthetic biological state and this is why synthetic 
biology is such a fast-emerging discipline of mainstream science. 
‘Covid vaccines’ are infusing self-replicating synthetic genetic 
material into the cells to cumulatively take us on the Totalitarian 
Tiptoe from Human 1.0 to the synthetic biological Human 2.0 which 
will be physically and perceptually attached to the Smart Grid to one 
hundred percent control every thought, perception and deed. 
Humanity needs to wake up and fast. 


This is the barest explanation of where the ‘outcome’ is planned to 
go but it’s enough to see the journey happening all around us. Those 
new to this information will already see ‘Covid’ in a whole new 
context. I will add much more detail as we go along, but for the 
minutiae evidence see my mega-works, The Answer, The Trigger and 
Everything You Need to Know But Have Never Been Told. 

Now — how does a Renegade Mind see the ‘world’? 


CHAPTER TWO 
Renegade Perception 


It is one thing to be clever and another to be wise 
George R.R. Martin 


simple definition of the difference between a programmed 

mind and a Renegade Mind would be that one sees only dots 
while the other connects them to see the picture. Reading reality 
with accuracy requires the observer to (a) know the planned 
outcome and (b) realise that everything, but everything, is connected. 


The entirety of infinite reality is connected — that’s its very nature — 
and with human society an expression of infinite reality the same 
must apply. Simple cause and effect is a connection. The effect is 
triggered by the cause and the effect then becomes the cause of 
another effect. Nothing happens in isolation because it can’t. Life in 
whatever reality is simple choice and consequence. We make choices 
and these lead to consequences. If we don’t like the consequences we 
can make different choices and get different consequences which 
lead to other choices and consequences. The choice and the 
consequence are not only connected they are indivisible. You can’t 
have one without the other as an old song goes. A few cannot 
control the world unless those being controlled allow that to happen 
— cause and effect, choice and consequence. Control — who has it and 
who doesn’t — is a two-way process, a symbiotic relationship, 
involving the controller and controlled. “They took my freedom 
away!!’ Well, yes, but you also gave it to them. Humanity is 


subjected to mass control because humanity has acquiesced to that 
control. This is all cause and effect and literally a case of give and 
take. In the same way world events of every kind are connected and 
the Cult works incessantly to sell the illusion of the random and 
coincidental to maintain the essential (to them) perception of dots 
that hide the picture. Renegade Minds know this and constantly 
scan the world for patterns of connection. This is absolutely pivotal 
in understanding the happenings in the world and without that 
perspective clarity is impossible. First you know the planned 
outcome and then you identify the steps on the journey — the day-by- 
day apparently random which, when connected in relation to the 
outcome, no longer appear as individual events, but as the 
proverbial chain of events leading in the same direction. I’ll give you 
some examples: 


Political puppet show 

We are told to believe that politics is ‘adversarial’ in that different 
parties with different beliefs engage in an endless tussle for power. 
There may have been some truth in that up to a point — and only a 
point — but today divisions between ‘different’ parties are rhetorical 
not ideological. Even the rhetorical is fusing into one-speak as the 
parties eject any remaining free thinkers while others succumb to the 
ever-gathering intimidation of anyone with the ‘wrong’ opinion. The 
Cult is not anew phenomenon and can be traced back thousands of 
years as my books have documented. Its intergenerational initiates 
have been manipulating events with increasing effect the more that 
global power has been centralised. In ancient times the Cult secured 
control through the system of monarchy in which ‘special’ 
bloodlines (of which more later) demanded the right to rule as kings 
and queens simply by birthright and by vanquishing others who 
claimed the same birthright. There came a time, however, when 
people had matured enough to see the unfairness of such tyranny 
and demanded a say in who governed them. Note the word — 
governed them. Not served them — governed them, hence government 
defined as ‘the political direction and control exercised over the 


actions of the members, citizens, or inhabitants of communities, 
societies, and states; direction of the affairs of a state, community, 
etc.’ Governments exercise control over rather than serve just like the 
monarchies before them. Bizarrely there are still countries like the 
United Kingdom which are ruled by a monarch and a government 
that officially answers to the monarch. The UK head of state and that 
of Commonwealth countries such as Canada, Australia and New 
Zealand is ‘selected’ by who in a single family had unprotected sex 
with whom and in what order. Pinch me it can’t be true. Ouch! Shit, 
it is. The demise of monarchies in most countries offered a potential 
vacuum in which some form of free and fair society could arise and 
the Cult had that base covered. Monarchies had served its interests 
but they couldn’t continue in the face of such widespread opposition 
and, anyway, replacing a ‘royal’ dictatorship that people could see 
with a dictatorship ‘of the people’ hiding behind the concept of 
‘democracy’ presented far greater manipulative possibilities and 
ways of hiding coordinated tyranny behind the illusion of ‘freedom’. 


Democracy is quite wrongly defined as government selected by 
the population. This is not the case at all. It is government selected 
by some of the population (and then only in theory). This ‘some’ 
doesn’t even have to be the majority as we have seen so often in first- 
past-the-post elections in which the so-called majority party wins 
fewer votes than the ‘losing’ parties combined. Democracy can give 
total power to a party in government from a minority of the votes 
cast. It’s a sleight of hand to sell tyranny as freedom. Seventy-four 
million Trump-supporting Americans didn’t vote for the 
‘Democratic’ Party of Joe Biden in the distinctly dodgy election in 
2020 and yet far from acknowledging the wishes and feelings of that 
great percentage of American society the Cult-owned Biden 
government set out from day one to destroy them and their right to a 
voice and opinion. Empty shell Biden and his Cult handlers said 
they were doing this to ‘protect democracy’. Such is the level of 
lunacy and sickness to which politics has descended. Connect the 
dots and relate them to the desired outcome — a world government 
run by self-appointed technocrats and no longer even elected 


politicians. While operating through its political agents in 
government the Cult is at the same time encouraging public distain 
for politicians by putting idiots and incompetents in theoretical 
power on the road to deleting them. The idea is to instil a public 
reaction that says of the technocrats: ‘Well, they couldn't do any 
worse than the pathetic politicians.’ It’s all about controlling 
perception and Renegade Minds can see through that while 
programmed minds cannot when they are ignorant of both the 
planned outcome and the manipulation techniques employed to 
secure that end. This knowledge can be learned, however, and fast if 
people choose to get informed. 


Politics may at first sight appear very difficult to control from a 
central point. I mean look at the ‘different’ parties and how would 
you be able to oversee them all and their constituent parts? In truth, 
it’s very straightforward because of their structure. We are back to 
the pyramid of imposition and acquiescence. Organisations are 
structured in the same way as the system as a whole. Political parties 
are not open forums of free expression. They are hierarchies. I was a 
national spokesman for the British Green Party which claimed to be 
a different kind of politics in which influence and power was 
devolved; but I can tell you from direct experience — and it’s far 
worse now -— that Green parties are run as hierarchies like all the 
others however much they may try to hide that fact or kid 
themselves that it’s not true. A very few at the top of all political 
parties are directing policy and personnel. They decide if you are 
elevated in the party or serve as a government minister and to do 
that you have to be a yes man or woman. Look at all the maverick 
political thinkers who never ascended the greasy pole. If you want to 
progress within the party or reach ‘high-office’ you need to fall into 
line and conform. Exceptions to this are rare indeed. Should you 
want to run for parliament or Congress you have to persuade the 
local or state level of the party to select you and for that you need to 
play the game as dictated by the hierarchy. If you secure election and 
wish to progress within the greater structure you need to go on 
conforming to what is acceptable to those running the hierarchy 


from the peak of the pyramid. Political parties are perceptual gulags 
and the very fact that there are party ‘Whips’ appointed to ‘whip’ 
politicians into voting the way the hierarchy demands exposes the 
ridiculous idea that politicians are elected to serve the people they 
are supposed to represent. Cult operatives and manipulation has 
long seized control of major parties that have any chance of forming 
a government and at least most of those that haven’t. A new party 
forms and the Cult goes to work to infiltrate and direct. This has 
reached such a level today that you see video compilations of 
‘leaders’ of all parties whether Democrats, Republicans, 
Conservative, Labour and Green parroting the same Cult mantra of 
‘Build Back Better’ and the ‘Great Reset’ which are straight off the 
Cult song-sheet to describe the transformation of global society in 
response to the Cult-instigated hoaxes of the ‘Covid pandemic’ and 
human-caused ‘climate change’. To see Caroline Lucas, the Green 
Party MP that I knew when I was in the party in the 1980s, speaking 
in support of plans proposed by Cult operative Klaus Schwab 
representing the billionaire global elite is a real head-shaker. 


Many parties — one master 

The party system is another mind-trick and was instigated to change 
the nature of the dictatorship by swapping ‘royalty’ for dark suits 
that people believed — though now ever less so — represented their 
interests. Understanding this trick is to realise that a single force (the 
Cult) controls all parties either directly in terms of the major ones or 
through manipulation of perception and ideology with others. You 
don’t need to manipulate Green parties to demand your 
transformation of society in the name of ‘climate change’ when they 
are obsessed with the lie that this is essential to ‘save the planet’. You 
just give them a platform and away they go serving your interests 
while believing they are being environmentally virtuous. America’s 
political structure is a perfect blueprint for how the two or multi- 
party system is really a one-party state. The Republican Party is 
controlled from one step back in the shadows by a group made up of 
billionaires and their gofers known as neoconservatives or Neocons. 


I have exposed them in fine detail in my books and they were the 
driving force behind the policies of the imbecilic presidency of Boy 
George Bush which included 9/11 (see The Trigger for a 
comprehensive demolition of the official story), the subsequent ‘war 
on terror’ (war of terror) and the invasions of Afghanistan and Iraq. 
The latter was a No-Problem-Reaction-Solution based on claims by 
Cult operatives, including Bush and British Prime Minister Tony 
Blair, about Saddam Hussein’s ‘weapons of mass destruction’ which 
did not exist as war criminals Bush and Blair well knew. 


HIDDEN 
HAND 


Figure 6: Different front people, different parties — same control system. 


The Democratic Party has its own ‘Neocon’ group controlling 
from the background which I call the ‘Democons’ and here’s the 
penny-drop — the Neocons and Democons answer to the same 
masters one step further back into the shadows (Fig 6). At that level 
of the Cult the Republican and Democrat parties are controlled by 
the same people and no matter which is in power the Cult is in 
power. This is how it works in almost every country and certainly in 
Britain with Conservative, Labour, Liberal Democrat and Green 
parties now all on the same page whatever the rhetoric may be in 
their feeble attempts to appear different. Neocons operated at the 
time of Bush through a think tank called The Project for the New 
American Century which in September, 2000, published a document 
entitled Rebuilding America’s Defenses: Strategies, Forces, and Resources 


For a New Century demanding that America fight ‘multiple, 
simultaneous major theatre wars’ as a ‘core mission’ to force regime- 
change in countries including Iraq, Libya and Syria. Neocons 
arranged for Bush (‘Republican’) and Blair (‘Labour Party’) to front- 
up the invasion of Iraq and when they departed the Democons 
orchestrated the targeting of Libya and Syria through Barack Obama 
(‘Democrat’) and British Prime Minister David Cameron 
(‘Conservative Party’). We have ‘different’ parties and ‘different’ 
people, but the same unfolding script. The more the Cult has seized 
the reigns of parties and personnel the more their policies have 
transparently pursued the same agenda to the point where the 
fascist ‘Covid’ impositions of the Conservative junta of Jackboot 
Johnson in Britain were opposed by the Labour Party because they 
were not fascist enough. The Labour Party is likened to the US 
Democrats while the Conservative Party is akin to a British version 
of the Republicans and on both sides of the Atlantic they all speak 
the same language and support the direction demanded by the Cult 
although some more enthusiastically than others. It’s a similar story 
in country after country because it’s all centrally controlled. Oh, but 
what about Trump? I’ll come to him shortly. Political ‘choice’ in the 
‘party’ system goes like this: You vote for Party A and they get into 
government. You don’t like what they do so next time you vote for 
Party B and they get into government. You don’t like what they do 
when it’s pretty much the same as Party A and why wouldn't that be 
with both controlled by the same force? Given that only two, 
sometimes three, parties have any chance of forming a government 
to get rid of Party B that you don’t like you have to vote again for 
Party A which ... you don’t like. This, ladies and gentlemen, is what 
they call ‘democracy’ which we are told — wrongly — is a term 
interchangeable with ‘freedom’. 


The cult of cults 

At this point I need to introduce a major expression of the Global 
Cult known as Sabbatian-Frankism. Sabbatian is also spelt as 
Sabbatean. I will summarise here. I have published major exposés 


and detailed background in other works. Sabbatian-Frankism 
combines the names of two frauds posing as ‘Jewish’ men, Sabbatai 
Zevi (1626-1676), a rabbi, black magician and occultist who 
proclaimed he was the Jewish messiah; and Jacob Frank (1726-1791), 
the Polish ‘Jew’, black magician and occultist who said he was the 
reincarnation of ‘messiah’ Zevi and biblical patriarch Jacob. They 
worked across two centuries to establish the Sabbatian-Frankist cult 
that plays a major, indeed central, role in the manipulation of human 
society by the Global Cult which has its origins much further back in 
history than Sabbatai Zevi. I should emphasise two points here in 
response to the shrill voices that will scream ‘anti-Semitism’: (1) 
Sabbatian-Frankists are NOT Jewish and only pose as such to hide 
their cult behind a Jewish facade; and (2) my information about this 
cult has come from Jewish sources who have long realised that their 
society and community has been infiltrated and taken over by 
interloper Sabbatian-Frankists. Infiltration has been the foundation 
technique of Sabbatian-Frankism from its official origin in the 17th 
century. Zevi’s Sabbatian sect attracted a massive following 
described as the biggest messianic movement in Jewish history, 
spreading as far as Africa and Asia, and he promised a return for the 
Jews to the ‘Promised Land’ of Israel. Sabbatianism was not Judaism 
but an inversion of everything that mainstream Judaism stood for. So 
much so that this sinister cult would have a feast day when Judaism 
had a fast day and whatever was forbidden in Judaism the 
Sabbatians were encouraged and even commanded to do. This 
included incest and what would be today called Satanism. Members 
were forbidden to marry outside the sect and there was a system of 
keeping their children ignorant of what they were part of until they 
were old enough to be trusted not to unknowingly reveal anything 
to outsiders. The same system is employed to this day by the Global 
Cult in general which Sabbatian-Frankism has enormously 
influenced and now largely controls. 

Zevi and his Sabbatians suffered a setback with the intervention 
by the Sultan of the Islamic Ottoman Empire in the Middle East and 
what is now the Republic of Turkey where Zevi was located. The 


Sultan gave him the choice of proving his ‘divinity’, converting to 
Islam or facing torture and death. Funnily enough Zevi chose to 
convert or at least appear to. Some of his supporters were 
disillusioned and drifted away, but many did not with 300 families 
also converting — only in theory — to Islam. They continued behind 
this Islamic smokescreen to follow the goals, rules and rituals of 
Sabbatianism and became known as ‘crypto-Jews’ or the ‘Donmeh’ 
which means ‘to turn’. This is rather ironic because they didn’t ‘turn’ 
and instead hid behind a fake Islamic persona. The process of 
appearing to be one thing while being very much another would 
become the calling card of Sabbatianism especially after Zevi’s death 
and the arrival of the Satanist Jacob Frank in the 18th century when 
the cult became Sabbatian-Frankism and plumbed still new depths 
of depravity and infiltration which included -— still includes — human 
sacrifice and sex with children. Wherever Sabbatians go paedophilia 
and Satanism follow and is it really a surprise that Hollywood is so 
infested with child abuse and Satanism when it was established by 
Sabbatian-Frankists and is still controlled by them? Hollywood has 
been one of the prime vehicles for global perceptual programming 
and manipulation. How many believe the version of ‘history’ 
portrayed in movies when it is a travesty and inversion (again) of the 
truth? Rabbi Marvin Antelman describes Frankism in his book, To 
Eliminate the Opiate, as ‘a movement of complete evil’ while Jewish 
professor Gershom Scholem said of Frank in The Messianic Idea in 
Judaism: ‘Tn all his actions [he was] a truly corrupt and degenerate 
individual ... one of the most frightening phenomena in the whole of 
Jewish history.’ Frank was excommunicated by traditional rabbis, as 
was Zevi, but Frank was undeterred and enjoyed vital support from 
the House of Rothschild, the infamous banking dynasty whose 
inner-core are Sabbatian-Frankists and not Jews. Infiltration of the 
Roman Church and Vatican was instigated by Frank with many 
Donmeh ‘turning’ again to convert to Roman Catholicism with a 
view to hijacking the reins of power. This was the ever-repeating 
modus operandi and continues to be so. Pose as an advocate of the 
religion, culture or country that you want to control and then 


manipulate your people into the positions of authority and influence 
largely as advisers, administrators and Svengalis for those that 
appear to be in power. They did this with Judaism, Christianity 
(Christian Zionism is part of this), Islam and other religions and 
nations until Sabbatian-Frankism spanned the world as it does 
today. 


Sabbatian Saudis and the terror network 

One expression of the Sabbatian-Frankist Donmeh within Islam is 
the ruling family of Saudi Arabia, the House of Saud, through which 
came the vile distortion of Islam known as Wahhabism. This is the 
violent creed followed by terrorist groups like Al-Qaeda and ISIS or 
Islamic State. Wahhabism is the hand-chopping, head-chopping 
‘religion’ of Saudi Arabia which is used to keep the people in a 
constant state of fear so the interloper House of Saud can continue to 
rule. Al-Qaeda and Islamic State were lavishly funded by the House 
of Saud while being created and directed by the Sabbatian-Frankist 
network in the United States that operates through the Pentagon, 
CIA and the government in general of whichever ‘party’. The front 
man for the establishment of Wahhabism in the middle of the 18th 
century was a Sabbatian-Frankist ‘crypto-Jew’ posing as Islamic 
called Muhammad ibn Abd al-Wahhab. His daughter would marry 
the son of Muhammad bin Saud who established the first Saudi state 
before his death in 1765 with support from the British Empire. Bin 
Saud’s successors would establish modern Saudi Arabia in league 
with the British and Americans in 1932 which allowed them to seize 
control of Islam’s major shrines in Mecca and Medina. They have 
dictated the direction of Sunni Islam ever since while Iran is the 
major centre of the Shiite version and here we have the source of at 
least the public conflict between them. The Sabbatian network has 
used its Wahhabi extremists to carry out Problem-Reaction-Solution 
terrorist attacks in the name of ‘Al-Qaeda’ and ‘Islamic State’ to 
justify a devastating ‘war on terror’, ever-increasing surveillance of 
the population and to terrify people into compliance. Another 
insight of the Renegade Mind is the streetwise understanding that 


just because a country, location or people are attacked doesn’t mean 
that those apparently representing that country, location or people 
are not behind the attackers. Often they are orchestrating the attacks 
because of the societal changes that can be then justified in the name 
of ‘saving the population from terrorists’. 


I show in great detail in The Trigger how Sabbatian-Frankists were 
the real perpetrators of 9/11 and not ‘19 Arab hijackers’ who were 
blamed for what happened. Observe what was justified in the name 
of 9/11 alone in terms of Middle East invasions, mass surveillance 
and control that fulfilled the demands of the Project for the New 
American Century document published by the Sabbatian Neocons. 
What appear to be enemies are on the deep inside players on the 
same Sabbatian team. Israel and Arab ‘royal’ dictatorships are all 
ruled by Sabbatians and the recent peace agreements between Israel 
and Saudi Arabia, the United Arab Emirates (UAE) and others are 
only making formal what has always been the case behind the 
scenes. Palestinians who have been subjected to grotesque tyranny 
since Israel was bombed and terrorised into existence in 1948 have 
never stood a chance. Sabbatian-Frankists have controlled Israel (so 
the constant theme of violence and war which Sabbatians love) and 
they have controlled the Arab countries that Palestinians have 
looked to for real support that never comes. ‘Royal families’ of the 
Arab world in Saudi Arabia, Bahrain, UAE, etc., are all Sabbatians 
with allegiance to the aims of the cult and not what is best for their 
Arabic populations. They have stolen the oil and financial resources 
from their people by false claims to be ‘royal dynasties’ with a 
genetic right to rule and by employing vicious militaries to impose 
their will. 


Satanic ‘illumination’ 

The Satanist Jacob Frank formed an alliance in 1773 with two other 
Sabbatians, Mayer Amschel Rothschild (1744-1812), founder of the 
Rothschild banking dynasty, and Jesuit-educated fraudulent Jew, 
Adam Weishaupt, and this led to the formation of the Bavarian 
Illuminati, firstly under another name, in 1776. The Illuminati would 


be the manipulating force behind the French Revolution (1789-1799) 
and was also involved in the American Revolution (1775-1783) 
before and after the Illuminati’s official creation. Weishaupt would 
later become (in public) a Protestant Christian in archetypal 
Sabbatian style. I read that his name can be decoded as Adam-Weis- 
haupt or ‘the first man to lead those who know’. He wasn’t a leader 
in the sense that he was a subordinate, but he did lead those below 
him in a crusade of transforming human society that still continues 
today. The theme was confirmed as early as 1785 when a horseman 
courier called Lanz was reported to be struck by lighting and 
extensive Illuminati documents were found in his saddlebags. They 
made the link to Weishaupt and detailed the plan for world takeover. 
Current events with ‘Covid’ fascism have been in the making for a 
very long time. Jacob Frank was jailed for 13 years by the Catholic 
Inquisition after his arrest in 1760 and on his release he headed for 
Frankfurt, Germany, home city and headquarters of the House of 
Rothschild where the alliance was struck with Mayer Amschel 
Rothschild and Weishaupt. Rothschild arranged for Frank to be 
given the title of Baron and he became a wealthy nobleman with a 
big following of Jews in Germany, the Austro-Hungarian Empire 
and other European countries. Most of them would have believed he 
was on their side. 

The name ‘Illuminati’ came from the Zohar which is a body of 
works in the Jewish mystical ‘bible’ called the Kabbalah. ‘Zohar’ is 
the foundation of Sabbatian-Frankist belief and in Hebrew ‘Zohar’ 
means ‘splendour’, ‘radiance’, ‘illuminated’, and so we have 
‘Tlluminati’. They claim to be the ‘Illuminated Ones’ from their 
knowledge systematically hidden from the human population and 
passed on through generations of carefully-chosen initiates in the 
global secret society network or Cult. Hidden knowledge includes 
an awareness of the Cult agenda for the world and the nature of our 
collective reality that I will explore later. Cult ‘illumination’ is 
symbolised by the torch held by the Statue of Liberty which was 
gifted to New York by French Freemasons in Paris who knew exactly 
what it represents. ‘Liberty’ symbolises the goddess worshipped in 


Babylon as Queen Semiramis or Ishtar. The significance of this will 
become clear. Notice again the ubiquitous theme of inversion with 
the Statue of ‘Liberty’ really symbolising mass control (Fig 7). A 
mirror-image statute stands on an island in the River Seine in Paris 
from where New York Liberty originated (Fig 8). A large replica of 
the Liberty flame stands on top of the Pont de l’Alma tunnel in Paris 
where Princess Diana died in a Cult ritual described in The Biggest 
Secret. Lucifer ‘the light bringer’ is related to all this (and much more 
as we'll see) and ‘Lucifer’ is a central figure in Sabbatian-Frankism 
and its associated Satanism. Sabbatians reject the Jewish Torah, or 
Pentateuch, the “five books of Moses’ in the Old Testament known as 
Genesis, Exodus, Leviticus, Numbers, and Deuteronomy which are 
claimed by Judaism and Christianity to have been dictated by ‘God’ 
to Moses on Mount Sinai. Sabbatians say these do not apply to them 
and they seek to replace them with the Zohar to absorb Judaism and 
its followers into their inversion which is an expression of a much 
greater global inversion. They want to delete all religions and force 
humanity to worship a one-world religion — Sabbatian Satanism that 
also includes worship of the Earth goddess. Satanic themes are being 
more and more introduced into mainstream society and while 
Christianity is currently the foremost target for destruction the 
others are planned to follow. 


Figure 7: The Cult goddess of Babylon disguised as the Statue of Liberty holding the flame of 
Lucifer the ‘light bringer’. 
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Figure 8: Liberty’s mirror image in Paris where the New York version originated. 


Marx brothers 

Rabbi Marvin Antelman connects the Illuminati to the Jacobins in To 
Eliminate the Opiate and Jacobins were the force behind the French 
Revolution. He links both to the Bund der Gerechten, or League of 
the Just, which was the network that inflicted communism/Marxism 
on the world. Antelman wrote: 


The original inner circle of the Bund der Gerechten consisted of born Catholics, Protestants 
and Jews [Sabbatian-Frankist infiltrators], and those representatives of respective subdivisions 
formulated schemes for the ultimate destruction of their faiths. The heretical Catholics laid 
plans which they felt would take a century or more for the ultimate destruction of the church; 
the apostate Jews for the ultimate destruction of the Jewish religion. 


Sabbatian-created communism connects into this anti-religion 
agenda in that communism does not allow for the free practice of 
religion. The Sabbatian ‘Bund’ became the International Communist 
Party and Communist League and in 1848 ‘Marxism’ was born with 
the Communist Manifesto of Sabbatian assets Karl Marx and 
Friedrich Engels. It is absolutely no coincidence that Marxism, just a 
different name for fascist and other centrally-controlled tyrannies, is 
being imposed worldwide as a result of the ‘Covid’ hoax and nor 
that Marxist/fascist China was the place where the hoax originated. 
The reason for this will become very clear in the chapter “Covid: The 
calculated catastrophe’. The so-called ‘Woke’ mentality has hijacked 


traditional beliefs of the political left and replaced them with far- 
right make-believe ‘social justice’ better known as Marxism. Woke 
will, however, be swallowed by its own perceived ‘revolution’ which 
is really the work of billionaires and billionaire corporations feigning 
being ‘Woke’. Marxism is being touted by Wokers as a replacement 
for ‘capitalism’ when we don’t have ‘capitalism’. We have cartelism 
in which the market is stitched up by the very Cult billionaires and 
corporations bankrolling Woke. Billionaires love Marxism which 
keeps the people in servitude while they control from the top. 
Terminally naive Wokers think they are ‘changing the world’ when 
it’s the Cult that is doing the changing and when they have played 
their vital part and become surplus to requirements they, too, will be 
targeted. The Illuminati-Jacobins were behind the period known as 
‘The Terror’ in the French Revolution in 1793 and 1794 when Jacobin 
Maximillian de Robespierre and his Orwellian ‘Committee of Public 
Safety’ killed 17,000 ‘enemies of the Revolution’ who had once been 
‘friends of the Revolution’. Karl Marx (1818-1883), whose Sabbatian 
creed of Marxism has cost the lives of at least 100 million people, is a 
hero once again to Wokers who have been systematically kept 
ignorant of real history by their ‘education’ programming. As a 
result they now promote a Sabbatian ‘Marxist’ abomination destined 
at some point to consume them. Rabbi Antelman, who spent decades 
researching the Sabbatian plot, said of the League of the Just and 
Karl Marx: 


Contrary to popular opinion Karl Marx did not originate the Communist Manifesto. He was 
paid for his services by the League of the Just, which was known in its country of origin, 
Germany, as the Bund der Geaechteten. 


Antelman said the text attributed to Marx was the work of other 
people and Marx ‘was only repeating what others already said’. 
Marx was ‘a hired hack — lackey of the wealthy Illuminists’. Marx 
famously said that religion was the ‘opium of the people’ (part of the 
Sabbatian plan to demonise religion) and Antelman called his books, 
To Eliminate the Opiate. Marx was born Jewish, but his family 
converted to Christianity (Sabbatian modus operandi) and he 


attacked Jews, not least in his book, A World Without Jews. In doing 
so he supported the Sabbatian plan to destroy traditional Jewishness 
and Judaism which we are clearly seeing today with the vindictive 
targeting of orthodox Jews by the Sabbatian government of Israel 
over ‘Covid’ laws. I don’t follow any religion and it has done much 
damage to the world over centuries and acted as a perceptual 
straightjacket. Renegade Minds, however, are always asking why 
something is being done. It doesn’t matter if they agree or disagree 
with what is happening — why is it happening is the question. The 
‘why?’ can be answered with regard to religion in that religions 
create interacting communities of believers when the Cult wants to 
dismantle all discourse, unity and interaction (see ‘Covid’ 
lockdowns) and the ultimate goal is to delete all religions for a one- 
world religion of Cult Satanism worshipping their ‘god’ of which 
more later. We see the same ‘why?’ with gun control in America. I 
don’t have guns and don’t want them, but why is the Cult seeking to 
disarm the population at the same time that law enforcement 
agencies are armed to their molars and why has every tyrant in 
history sought to disarm people before launching the final takeover? 
They include Hitler, Stalin, Pol Pot and Mao who followed 
confiscation with violent seizing of power. You know it’s a Cult 
agenda by the people who immediately race to the microphones to 
exploit dead people in multiple shootings. Ultra-Zionist Cult lackey 
Senator Chuck Schumer was straight on the case after ten people 
were killed in Boulder, Colorado in March, 2121. Simple rule ... if 
Schumer wants it the Cult wants it and the same with his ultra- 
Zionist mate the wild-eyed Senator Adam Schiff. At the same time 
they were calling for the disarmament of Americans, many of whom 
live a long way from a police response, Schumer, Schiff and the rest 
of these pampered clowns were sitting on Capitol Hill behind a 
razor-wired security fence protected by thousands of armed troops 
in addition to their own armed bodyguards. Mom and pop in an 
isolated home? They’re just potential mass shooters. 


Sabbatian-Frankists and most importantly the Rothschilds were 
behind the creation of ‘Zionism’, a political movement that 
demanded a Jewish homeland in Israel as promised by Sabbatai 
Zevi. The very symbol of Israel comes from the German meaning of 
the name Rothschild. Dynasty founder Mayer Amschel Rothschild 
changed the family name from Bauer to Rothschild, or “Red-Shield’ 
in German, in deference to the six-pointed ‘Star of David’ hexagram 
displayed on the family’s home in Frankfurt. The symbol later 
appeared on the flag of Israel after the Rothschilds were centrally 
involved in its creation. Hexagrams are not a uniquely Jewish 
symbol and are widely used in occult (‘hidden’) networks often as a 
symbol for Saturn (see my other books for why). Neither are 
Zionism and Jewishness interchangeable. Zionism is a political 
movement and philosophy and not a ‘race’ or a people. Many Jews 
oppose Zionism and many non-Jews, including US President Joe 
Biden, call themselves Zionists as does Israel-centric Donald Trump. 
America’s support for the Israel government is pretty much a gimme 
with ultra-Zionist billionaires and corporations providing fantastic 
and dominant funding for both political parties. Former 
Congresswoman Cynthia McKinney has told how she was 
approached immediately she ran for office to ‘sign the pledge’ to 
Israel and confirm that she would always vote in that country’s best 
interests. All American politicians are approached in this way. 
Anyone who refuses will get no support or funding from the 
enormous and all-powerful Zionist lobby that includes organisations 
like mega-lobby group AIPAC, the American Israel Public Affairs 
Committee. Trump’s biggest funder was ultra-Zionist casino and 
media billionaire Sheldon Adelson while major funders of the 
Democratic Party include ultra-Zionist George Soros and ultra- 
Zionist financial and media mogul, Haim Saban. Some may reel back 
at the suggestion that Soros is an Israel-firster (Sabbatian-controlled 
Israel-firster), but Renegade Minds watch the actions not the words 
and everywhere Soros donates his billions the Sabbatian agenda 
benefits. In the spirit of Sabbatian inversion Soros pledged $1 billion 
for anew university network to promote ‘liberal values and tackle 
intolerance’. He made the announcement during his annual speech 


at the Cult-owned World Economic Forum in Davos, Switzerland, in 
January, 2020, after his ‘harsh criticism’ of ‘authoritarian rulers’ 
around the world. You can only laugh at such brazen mendacity. 
How he doesn’t laugh is the mystery. Translated from the Orwellian 
‘liberal values and tackle intolerance’ means teaching non-white 
people to hate white people and for white people to loathe 
themselves for being born white. The reason for that will become 
clear. 


The ‘Anti-Semitism fraud 

Zionists support the Jewish homeland in the land of Palestine which 
has been the Sabbatian-Rothschild goal for so long, but not for the 
benefit of Jews. Sabbatians and their global Anti-Semitism Industry 
have skewed public and political opinion to equate opposing the 
violent extremes of Zionism to be a blanket attack and condemnation 
of all Jewish people. Sabbatians and their global Anti-Semitism 
Industry have skewed public and political opinion to equate 
opposing the violent extremes of Zionism to be a blanket attack and 
condemnation of all Jewish people. This is nothing more than a 
Sabbatian protection racket to stop legitimate investigation and 
exposure of their agendas and activities. The official definition of 
‘anti-Semitism’ has more recently been expanded to include criticism 
of Zionism — a political movement — and this was done to further stop 
exposure of Sabbatian infiltrators who created Zionism as we know 
it today in the 19th century. Renegade Minds will talk about these 
subjects when they know the shit that will come their way. People 
must decide if they want to know the truth or just cower in the 
corner in fear of what others will say. Sabbatians have been trying to 
label me as ‘anti-Semitic’ since the 1990s as I have uncovered more 
and more about their background and agendas. Useless, gutless, 
fraudulent ‘journalists’ then just repeat the smears without question 
and on the day I was writing this section a pair of unquestioning 
repeaters called Ben Quinn and Archie Bland (how appropriate) 
outright called me an ‘anti-Semite’ in the establishment propaganda 
sheet, the London Guardian, with no supporting evidence. The 


Sabbatian Anti-Semitism Industry said so and who are they to 
question that? They wouldn’t dare. Ironically ‘Semitic’ refers to a 
group of languages in the Middle East that are almost entirely 
Arabic. ‘Anti-Semitism’ becomes ‘anti-Arab’ which if the 
consequences of this misunderstanding were not so grave would be 
hilarious. Don’t bother telling Quinn and Bland. I don’t want to 
confuse them, bless ‘em. One reason Iam dubbed ‘anti-Semitic’ is 
that I wrote in the 1990s that Jewish operatives (Sabbatians) were 
heavily involved in the Russian Revolution when Sabbatians 
overthrew the Romanov dynasty. This apparently made me ‘anti- 
Semitic’. Oh, really? Here is a section from The Trigger: 


British journalist Robert Wilton confirmed these themes in his 1920 book The Last Days of the 
Romanovs when he studied official documents from the Russian government to identify the 
members of the Bolshevik ruling elite between 1917 and 1919. The Central Committee 
included 41 Jews among 62 members; the Council of the People’s Commissars had 17 Jews 
out of 22 members; and 458 of the 556 most important Bolshevik positions between 1918 and 
1919 were occupied by Jewish people. Only 17 were Russian. Then there were the 23 Jews 
among the 36 members of the vicious Cheka Soviet secret police established in 1917 who 
would soon appear all across the country. 


Professor Robert Service of Oxford University, an expert on 20th century Russian history, 
found evidence that [‘Jewish’] Leon Trotsky had sought to make sure that Jews were enrolled 
in the Red Army and were disproportionately represented in the Soviet civil bureaucracy that 
included the Cheka which performed mass arrests, imprisonment and executions of ‘enemies 
of the people’. A US State Department Decimal File (861.00/5339) dated November 13th, 
1918, names [Rothschild banking agent in America] Jacob Schiff and a list of ultra-Zionists as 
funders of the Russian Revolution leading to claims of a ‘Jewish plot’, but the key point missed 
by all is they were not ‘Jews’ — they were Sabbatian-Frankists. 


Britain’s Winston Churchill made the same error by mistake or 
otherwise. He wrote in a 1920 edition of the Illustrated Sunday Herald 
that those behind the Russian revolution were part of a “worldwide 
conspiracy for the overthrow of civilisation and for the 
reconstitution of society on the basis of arrested development, of 
envious malevolence, and impossible equality’ (see ‘Woke’ today 
because that has been created by the same network). Churchill said 
there was no need to exaggerate the part played in the creation of 
Bolshevism and in the actual bringing about of the Russian 


Revolution ‘by these international and for the most part atheistical 
Jews’ [‘atheistical Jews’ = Sabbatians]. Churchill said it is certainly a 
very great one and probably outweighs all others: ‘With the notable 
exception of Lenin, the majority of the leading figures are Jews.’ He 
went on to describe, knowingly or not, the Sabbatian modus 
operandi of placing puppet leaders nominally in power while they 
control from the background: 


Moreover, the principal inspiration and driving power comes from the Jewish leaders. Thus 
Tchitcherin, a pure Russian, is eclipsed by his nominal subordinate, Litvinoff, and the 
influence of Russians like Bukharin or Lunacharski cannot be compared with the power of 
Trotsky, or of Zinovieff, the Dictator of the Red Citadel (Petrograd), or of Krassin or Radek — all 
Jews. In the Soviet institutions the predominance of Jews is even more astonishing. And the 
prominent, if not indeed the principal, part in the system of terrorism applied by the 
Extraordinary Commissions for Combatting Counter-Revolution has been taken by Jews, and 
in some notable cases by Jewesses. 


What I said about seriously disproportionate involvement in the 
Russian Revolution by Jewish ‘revolutionaries’ (Sabbatians) is 
provable fact, but truth is no defence against the Sabbatian Anti- 
Semitism Industry, its repeater parrots like Quinn and Bland, and 
the now breathtaking network of so-called ‘Woke’ ‘anti-hate’ groups 
with interlocking leaderships and funding which have the role of 
discrediting and silencing anyone who gets too close to exposing the 
Sabbatians. We have seen ‘truth is no defence’ confirmed in legal 
judgements with the Saskatchewan Human Rights Commission in 
Canada decreeing this: ‘Truthful statements can be presented in a 
manner that would meet the definition of hate speech, and not all 
truthful statements must be free from restriction.’ Most ‘anti-hate’ 
activists, who are themselves consumed by hatred, are too stupid 
and ignorant of the world to know how they are being used. They 
are far too far up their own virtue-signalling arses and it’s far too 
dark for them to see anything. 


The ‘revolution’ game 


The background and methods of the ‘Russian’ Revolution are 
straight from the Sabbatian playbook seen in the French Revolution 


and endless others around the world that appear to start as a 
revolution of the people against tyrannical rule and end up with a 
regime change to more tyrannical rule overtly or covertly. Wars, 
terror attacks and regime overthrows follow the Sabbatian cult 
through history with its agents creating them as Problem-Reaction- 
Solutions to remove opposition on the road to world domination. 
Sabbatian dots connect the Rothschilds with the Illuminati, Jacobins 
of the French Revolution, the ‘Bund’ or League of the Just, the 
International Communist Party, Communist League and the 
Communist Manifesto of Karl Marx and Friedrich Engels that would 
lead to the Rothschild-funded Russian Revolution. The sequence 
comes under the heading of ‘creative destruction’ when you advance 
to your global goal by continually destroying the status quo to install 
a new status quo which you then also destroy. The two world wars 
come to mind. With each new status quo you move closer to your 
planned outcome. Wars and mass murder are to Sabbatians a 
collective blood sacrifice ritual. They are obsessed with death for 
many reasons and one is that death is an inversion of life. Satanists 
and Sabbatians are obsessed with death and often target churches 
and churchyards for their rituals. Inversion-obsessed Sabbatians 
explain the use of inverted symbolism including the inverted 
pentagram and inverted cross. The inversion of the cross has been 
related to targeting Christianity, but the cross was a religious symbol 
long before Christianity and its inversion is a statement about the 
Sabbatian mentality and goals more than any single religion. 


Sabbatians operating in Germany were behind the rise of the 
occult-obsessed Nazis and the subsequent Jewish exodus from 
Germany and Europe to Palestine and the United States after World 
War Two. The Rothschild dynasty was at the forefront of this both as 
political manipulators and by funding the operation. Why would 
Sabbatians help to orchestrate the horrors inflicted on Jews by the 
Nazis and by Stalin after they organised the Russian Revolution? 
Sabbatians hate Jews and their religion, that’s why. They pose as 
Jews and secure positions of control within Jewish society and play 
the ‘anti-Semitism’ card to protect themselves from exposure 


through a global network of organisations answering to the 
Sabbatian-created-and-controlled globe-spanning intelligence 
network that involves a stunning web of military-intelligence 
operatives and operations for a tiny country of just nine million. 
Among them are Jewish assets who are not Sabbatians but have been 
convinced by them that what they are doing is for the good of Israel 
and the Jewish community to protect them from what they have 
been programmed since childhood to believe is a Jew-hating hostile 
world. The Jewish community is just a highly convenient cover to 
hide the true nature of Sabbatians. Anyone getting close to exposing 
their game is accused by Sabbatian place-people and gofers of ‘anti- 
Semitism’ and claiming that all Jews are part of a plot to take over 
the world. I am not saying that. I am saying that Sabbatians — the real 
Jew-haters — have infiltrated the Jewish community to use them both 
as a cover and an ‘anti-Semitic’ defence against exposure. Thus we 
have the Anti-Semitism Industry targeted researchers in this way 
and most Jewish people think this is justified and genuine. They 
don’t know that their ‘Jewish’ leaders and institutions of state, 
intelligence and military are not controlled by Jews at all, but cultists 
and stooges of Sabbatian-Frankism. I once added my name to a pro- 
Jewish freedom petition online and the next time I looked my name 
was gone and text had been added to the petition blurb to attack me 
as an ‘anti-Semite’ such is the scale of perceptual programming. 


I tell the story in The Trigger and a chapter called ‘Atlantic Crossing’ 
how particularly after Israel was established the Sabbatians moved 
in on the United States and eventually grasped control of 
government administration, the political system via both Democrats 
and Republicans, the intelligence community like the CIA and 
National Security Agency (NSA), the Pentagon and mass media. 
Through this seriously compartmentalised network Sabbatians and 
their operatives in Mossad, Israeli Defense Forces (IDF) and US 
agencies pulled off 9/11 and blamed it on 19 ‘Al-Qaeda hijackers’ 
dominated by men from, or connected to, Sabbatian-ruled Saudi 


Arabia. The ‘19’ were not even on the planes let alone flew those big 
passenger jets into buildings while being largely incompetent at 
piloting one-engine light aircraft. ‘Hijacker’ Hani Hanjour who is 
said to have flown American Airlines Flight 77 into the Pentagon 
with a turn and manoeuvre most professional pilots said they would 
have struggled to do was banned from renting a small plane by 
instructors at the Freeway Airport in Bowie, Maryland, just six weeks 
earlier on the grounds that he was an incompetent pilot. The Jewish 
population of the world is just 0.2 percent with even that almost 
entirely concentrated in Israel (75 percent Jewish) and the United 
States (around two percent). This two percent and globally 0.2 
percent refers to Jewish people and not Sabbatian interlopers who are 
a fraction of that fraction. What a sobering thought when you think 
of the fantastic influence on world affairs of tiny Israel and that the 
Project for the New America Century (PNAC) which laid out the 
blueprint in September, 2000, for America’s war on terror and regime 
change wars in Iraq, Libya and Syria was founded and dominated by 
Sabbatians known as ‘Neocons’. The document conceded that this 
plan would not be supported politically or publicly without a major 
attack on American soil and a Problem-Reaction-Solution excuse to 
send troops to war across the Middle East. Sabbatian Neocons said: 


... [The] process of transformation ... [war and regime change] ... is likely to be a long one, 
absent some catastrophic and catalysing event — like a new Pearl Harbor. 


Four months later many of those who produced that document 
came to power with their inane puppet George Bush from the long- 
time Sabbatian Bush family. They included Sabbatian Dick Cheney 
who was Officially vice-president, but really de-facto president for 
the entirety of the ‘Bush’ government. Nine months after the ‘Bush’ 
inauguration came what Bush called at the time ‘the Pearl Harbor of 
the 21st century’ and with typical Sabbatian timing and symbolism 
2001 was the 60th anniversary of the attack in 1941 by the Japanese 
Air Force on Pearl Harbor, Hawaii, which allowed President 
Franklin Delano Roosevelt to take the United States into a Sabbatian- 


instigated Second World War that he said in his election campaign 
that he never would. The evidence is overwhelming that Roosevelt 
and his military and intelligence networks knew the attack was 
coming and did nothing to stop it, but they did make sure that 
America’s most essential naval ships were not in Hawaii at the time. 
Three thousand Americans died in the Pearl Harbor attacks as they 
did on September 11th. By the 9/11 year of 2001 Sabbatians had 
widely infiltrated the US government, military and intelligence 
operations and used their compartmentalised assets to pull off the 
‘Al-Qaeda’ attacks. If you read The Trigger it will blow your mind to 
see the utterly staggering concentration of ‘Jewish’ operatives 
(Sabbatian infiltrators) in essential positions of political, security, 
legal, law enforcement, financial and business power before, during, 
and after the attacks to make them happen, carry them out, and then 
cover their tracks — and I do mean staggering when you think of that 
0.2 percent of the world population and two percent of Americans 
which are Jewish while Sabbatian infiltrators are a fraction of that. A 
central foundation of the 9/11 conspiracy was the hijacking of 
government, military, Air Force and intelligence computer systems 
in real time through “back-door’ access made possible by Israeli 
(Sabbatian) ‘cyber security’ software. Sabbatian-controlled Israel is 
on the way to rivalling Silicon Valley for domination of cyberspace 
and is becoming the dominant force in cyber-security which gives 
them access to entire computer systems and their passcodes across 
the world. Then add to this that Zionists head (officially) Silicon 
Valley giants like Google (Larry Page and Sergey Brin), Google- 
owned YouTube (Susan Wojcicki), Facebook (Mark Zuckerberg and 
Sheryl Sandberg), and Apple (Chairman Arthur D. Levinson), and 
that ultra-Zionist hedge fund billionaire Paul Singer has a $1 billion 
stake in Twitter which is only nominally headed by ‘CEO’ pothead 
Jack Dorsey. As cable news host Tucker Carlson said of Dorsey: 
‘There used to be debate in the medical community whether 
dropping a ton of acid had permanent effects and I think that debate 
has now ended.’ Carlson made the comment after Dorsey told a 
hearing on Capitol Hill (if you cut through his bullshit) that he 


believed in free speech so long as he got to decide what you can hear 
and see. These ‘big names’ of Silicon Valley are only front men and 
women for the Global Cult, not least the Sabbatians, who are the true 
controllers of these corporations. Does anyone still wonder why 
these same people and companies have been ferociously censoring 
and banning people (like me) for exposing any aspect of the Cult 
agenda and especially the truth about the ‘Covid’ hoax which 
Sabbatians have orchestrated? 

The Jeffrey Epstein paedophile ring was a Sabbatian operation. He 
was Officially ‘Jewish’ but he was a Sabbatian and women abused by 
the ring have told me about the high number of ‘Jewish’ people 
involved. The Epstein horror has Sabbatian written all over it and 
matches perfectly their modus operandi and obsession with sex and 
ritual. Epstein was running a Sabbatian blackmail ring in which 
famous people with political and other influence were provided 
with young girls for sex while everything was being filmed and 
recorded on hidden cameras and microphones at his New York 
house, Caribbean island and other properties. Epstein survivors 
have described this surveillance system to me and some have gone 
public. Once the famous politician or other figure knew he or she 
was on video they tended to do whatever they were told. Here we go 
again ...when you've got them by the balls their hearts and minds 
will follow. Sabbatians use this blackmail technique on a wide scale 
across the world to entrap politicians and others they need to act as 
demanded. Epstein’s private plane, the infamous ‘Lolita Express’, 
had many well-known passengers including Bill Clinton while Bill 
Gates has flown on an Epstein plane and met with him four years 
after Epstein had been jailed for paedophilia. They subsequently met 
many times at Epstein’s home in New York according to a witness 
who was there. Epstein’s infamous side-kick was Ghislaine Maxwell, 
daughter of Mossad agent and ultra-Zionist mega-crooked British 
businessman, Bob Maxwell, who at one time owned the Daily Mirror 
newspaper. Maxwell was murdered at sea on his boat in 1991 by 
Sabbatian-controlled Mossad when he became a liability with his 


business empire collapsing as a former Mossad operative has 
confirmed (see The Trigger). 


Money, money, money, funny money... 
Before I come to the Sabbatian connection with the last three US 
presidents I will lay out the crucial importance to Sabbatians of 
controlling banking and finance. Sabbatian Mayer Amschel 
Rothschild set out to dominate this arena in his family’s quest for 
total global control. What is freedom? It is, in effect, choice. The 
more choices you have the freer you are and the fewer your choices 
the more you are enslaved. In the global structure created over 
centuries by Sabbatians the biggest decider and restrictor of choice is 
... money. Across the world if you ask people what they would like 
to do with their lives and why they are not doing that they will reply 
‘I don’t have the money’. This is the idea. A global elite of multi- 
billionaires are described as ‘greedy’ and that is true on one level; 
but control of money — who has it and who doesn’t — is not primarily 
about greed. It’s about control. Sabbatians have seized ever more 
control of finance and sucked the wealth of the world out of the 
hands of the population. We talk now, after all, about the ‘One- 
percent’ and even then the wealthiest are a lot fewer even than that. 
This has been made possible by a money scam so outrageous and so 
vast it could rightly be called the scam of scams founded on creating 
‘money’ out of nothing and ‘loaning’ that with interest to the 
population. Money out of nothing is called ‘credit’. Sabbatians have 
asserted control over governments and banking ever more 
completely through the centuries and secured financial laws that 
allow banks to lend hugely more than they have on deposit in a 
confidence trick known as fractional reserve lending. Imagine if you 
could lend money that doesn’t exist and charge the recipient interest 
for doing so. You would end up in jail. Bankers by contrast end up in 
mansions, private jets, Malibu and Monaco. 

Banks are only required to keep a fraction of their deposits and 
wealth in their vaults and they are allowed to lend ‘money’ they 
don’t have called ‘credit. Go into a bank for a loan and if you succeed 


the banker will not move any real wealth into your account. They 
will type into your account the amount of the agreed ‘loan’ — say 
£100,000. This is not wealth that really exists; it is non-existent, fresh- 
air, created-out-of-nothing ‘credit’ which has never, does not, and 
will never exist except in theory. Credit is backed by nothing except 
wind and only has buying power because people think that it has 
buying power and accept it in return for property, goods and 
services. I have described this situation as like those cartoon 
characters you see chasing each other and when they run over the 
edge of a cliff they keep running forward on fresh air until one of 
them looks down, realises what’s happened, and they all crash into 
the ravine. The whole foundation of the Sabbatian financial system is 
to stop people looking down except for periodic moments when they 
want to crash the system (as in 2008 and 2020 ongoing) and reap the 
rewards from all the property, businesses and wealth their borrowers 
had signed over as ‘collateral’ in return for a ‘loan’ of fresh air. Most 
people think that money is somehow created by governments when 
it comes into existence from the start as a debt through banks 
‘lending’ illusory money called credit. Yes, the very currency of 
exchange is a debt from day one issued as an interest-bearing loan. 
Why don’t governments create money interest-free and lend it to 
their people interest-free? Governments are controlled by Sabbatians 
and the financial system is controlled by Sabbatians for whom 
interest-free money would be a nightmare come true. Sabbatians 
underpin their financial domination through their global network of 
central banks, including the privately-owned US Federal Reserve 
and Britain’s Bank of England, and this is orchestrated by a 
privately-owned central bank coordination body called the Bank for 
International Settlements in Basle, Switzerland, created by the usual 
suspects including the Rockefellers and Rothschilds. Central bank 
chiefs don’t answer to governments or the people. They answer to 
the Bank for International Settlements or, in other words, the Global 
Cult which is dominated today by Sabbatians. 


There are so many constituent scams within the overall banking 
scam. When you take out a loan of thin-air credit only the amount of 
that loan is theoretically brought into circulation to add to the 
amount in circulation; but you are paying back the principle plus 
interest. The additional interest is not created and this means that 
with every ‘loan’ there is a shortfall in the money in circulation 
between what is borrowed and what has to be paid back. There is 
never even close to enough money in circulation to repay all 
outstanding public and private debt including interest. Coldly 
weaved in the very fabric of the system is the certainty that some 
will lose their homes, businesses and possessions to the banking 
‘lender’. This is less obvious in times of ‘boom’ when the amount of 
money in circulation (and the debt) is expanding through more 
people wanting and getting loans. When a downturn comes and the 
money supply contracts it becomes painfully obvious that there is 
not enough money to service all debt and interest. This is less 
obvious in times of ‘boom’ when the amount of money in circulation 
(and the debt) is expanding through more people wanting and 
getting loans. When a downturn comes and the money supply 
contracts and it becomes painfully obvious — as in 2008 and currently 
— that there is not enough money to service all debt and interest. 
Sabbatian banksters have been leading the human population 
through a calculated series of booms (more debt incurred) and busts 
(when the debt can’t be repaid and the banks get the debtor’s 
tangible wealth in exchange for non-existent ‘credit’). With each 
‘bust’ Sabbatian bankers have absorbed more of the world’s tangible 
wealth and we end up with the One-percent. Governments are in 
bankruptcy levels of debt to the same system and are therefore 
owned by a system they do not control. The Federal Reserve, 
‘America’s central bank’, is privately-owned and American 
presidents only nominally appoint its chairman or woman to 
maintain the illusion that it’s an arm of government. It’s not. The 
‘Fed’ is a cartel of private banks which handed billions to its 
associates and friends after the crash of 2008 and has been Sabbatian- 
controlled since it was manipulated into being in 1913 through the 
covert trickery of Rothschild banking agents Jacob Schiff and Paul 


Warburg, and the Sabbatian Rockefeller family. Somehow from a 
Jewish population of two-percent and globally 0.2 percent (Sabbatian 
interlopers remember are far smaller) ultra-Zionists headed the 
Federal Reserve for 31 years between 1987 and 2018 in the form of 
Alan Greenspan, Bernard Bernanke and Janet Yellen (now Biden’s 
Treasury Secretary) with Yellen’s deputy chairman a Israeli- 
American duel citizen and ultra-Zionist Stanley Fischer, a former 
governor of the Bank of Israel. Ultra-Zionist Fed chiefs spanned the 
presidencies of Ronald Reagan (‘Republican’), Father George Bush 
(‘Republican’), Bill Clinton (‘Democrat’), Boy George Bush 
(‘Republican’) and Barack Obama (‘Democrat’). We should really 
add the pre-Greenspan chairman, Paul Adolph Volcker, ‘appointed’ 
by Jimmy Carter (‘Democrat’) who ran the Fed between 1979 and 
1987 during the Carter and Reagan administrations before 
Greenspan took over. Volcker was a long-time associate and business 
partner of the Rothschilds. No matter what the ‘party’ officially in 
power the United States economy was directed by the same force. 
Here are members of the Obama, Trump and Biden administrations 
and see if you can make out a common theme. 


Barack Obama (Democrat) 

Ultra-Zionists Robert Rubin, Larry Summers, and Timothy Geithner 
ran the US Treasury in the Clinton administration and two of them 
reappeared with Obama. Ultra-Zionist Fed chairman Alan 
Greenspan had manipulated the crash of 2008 through deregulation 
and jumped ship just before the disaster to make way for ultra- 
Zionist Bernard Bernanke to hand out trillions to Sabbatian ‘too big 
to fail’ banks and businesses, including the ubiquitous ultra-Zionist 
Goldman Sachs which has an ongoing staff revolving door operation 
between itself and major financial positions in government 
worldwide. Obama inherited the fallout of the crash when he took 
office in January, 2009, and fortunately he had the support of his 
ultra-Zionist White House Chief of Staff Rahm Emmanuel, son of a 
terrorist who helped to bomb Israel into being in 1948, and his ultra- 
Zionist senior adviser David Axelrod, chief strategist in Obama’s two 


successful presidential campaigns. Emmanuel, later mayor of 
Chicago and former senior fundraiser and strategist for Bill Clinton, 
is an example of the Sabbatian policy after Israel was established of 
migrating insider families to America so their children would be 
born American citizens. ‘Obama’ chose this financial team 
throughout his administration to respond to the Sabbatian-instigated 
crisis: 

Timothy Geithner (ultra-Zionist) Treasury Secretary; Jacob J. Lew, 
Treasury Secretary; Larry Summers (ultra-Zionist), director of the 
White House National Economic Council; Paul Adolph Volcker 
(Rothschild business partner), chairman of the Economic Recovery 
Advisory Board; Peter Orszag (ultra-Zionist), director of the Office of 
Management and Budget overseeing all government spending; 
Penny Pritzker (ultra-Zionist), Commerce Secretary; Jared Bernstein 
(ultra-Zionist), chief economist and economic policy adviser to Vice 
President Joe Biden; Mary Schapiro (ultra-Zionist), chair of the 
Securities and Exchange Commission (SEC); Gary Gensler (ultra- 
Zionist), chairman of the Commodity Futures Trading Commission 
(CFTC); Sheila Bair (ultra-Zionist), chair of the Federal Deposit 
Insurance Corporation (FDIC); Karen Mills (ultra-Zionist), head of 
the Small Business Administration (SBA); Kenneth Feinberg (ultra- 
Zionist), Special Master for Executive [bail-out] Compensation. 
Feinberg would be appointed to oversee compensation (with strings) 
to 9/11 victims and families in a campaign to stop them having their 
day in court to question the official story. At the same time ultra- 
Zionist Bernard Bernanke was chairman of the Federal Reserve and 
these are only some of the ultra-Zionists with allegiance to 
Sabbatian-controlled Israel in the Obama government. Obama’s 
biggest corporate donor was ultra-Zionist Goldman Sachs which had 
employed many in his administration. 


Donald Trump (Republican) 

Trump claimed to be an outsider (he wasn’t) who had come to ‘drain 
the swamp’. He embarked on this goal by immediately appointing 
ultra-Zionist Steve Mnuchin, a Goldman Sachs employee for 17 


years, as his Treasury Secretary. Others included Gary Cohn (ultra- 
Zionist), chief operating officer of Goldman Sachs, his first Director 
of the National Economic Council and chief economic adviser, who 
was later replaced by Larry Kudlow (ultra-Zionist). Trump’s senior 
adviser throughout his four years in the White House was his 
sinister son-in-law Jared Kushner, a life-long friend of Israel Prime 
Minister Benjamin Netanyahu. Kushner is the son of a convicted 
crook who was pardoned by Trump in his last days in office. Other 
ultra-Zionists in the Trump administration included: Stephen Miller, 
Senior Policy Adviser; Avrahm Berkowitz, Deputy Adviser to Trump 
and his Senior Adviser Jared Kushner; Ivanka Trump, Adviser to the 
President, who converted to Judaism when she married Jared 
Kushner; David Friedman, Trump lawyer and Ambassador to Israel; 
Jason Greenblatt, Trump Organization executive vice president and 
chief legal officer, who was made Special Representative for 
International Negotiations and the Israeli-Palestinian Conflict; Rod 
Rosenstein, Deputy Attorney General; Elliot Abrams, Special 
Representative for Venezuela, then Iran; John Eisenberg, National 
Security Council Legal Adviser and Deputy Council to the President 
for National Security Affairs; Anne Neuberger, Deputy National 
Manager, National Security Agency; Ezra Cohen-Watnick, Acting 
Under Secretary of Defense for Intelligence; Elan Carr, Special Envoy 
to monitor and combat anti-Semitism; Len Khodorkovsky, Deputy 
Special Envoy to monitor and combat anti-Semitism; Reed Cordish, 
Assistant to the President, Intragovernmental and Technology 
Initiatives. Trump Vice President Mike Pence and Secretary of State 
Mike Pompeo, both Christian Zionists, were also vehement 
supporters of Israel and its goals and ambitions. 

Donald ‘free-speech believer’ Trump pardoned a number of 
financial and violent criminals while ignoring calls to pardon Julian 
Assange and Edward Snowden whose crimes are revealing highly 
relevant information about government manipulation and 
corruption and the widespread illegal surveillance of the American 
people by US ‘security’ agencies. It’s so good to know that Trump is 
on the side of freedom and justice and not mega-criminals with 


allegiance to Sabbatian-controlled Israel. These included a pardon 
for Israeli spy Jonathan Pollard who was jailed for life in 1987 under 
the Espionage Act. Aviem Sella, the Mossad agent who recruited 
Pollard, was also pardoned by Trump while Assange sat in jail and 
Snowden remained in exile in Russia. Sella had ‘fled’ (was helped to 
escape) to Israel in 1987 and was never extradited despite being 
charged under the Espionage Act. A Trump White House statement 
said that Sella’s clemency had been ‘supported by Benjamin 
Netanyahu, Ron Dermer, Israel’s US Ambassador, David Friedman, 
US Ambassador to Israel and Miriam Adelson, wife of leading 
Trump donor Sheldon Adelson who died shortly before. Other 
friends of Jared Kushner were pardoned along with Sholom Weiss 
who was believed to be serving the longest-ever white-collar prison 
sentence of more than 800 years in 2000. The sentence was 
commuted of Ponzi-schemer Eliyahu Weinstein who defrauded Jews 
and others out of $200 million. I did mention that Assange and 
Snowden were ignored, right? Trump gave Sabbatians almost 
everything they asked for in military and political support, moving 
the US Embassy from Tel Aviv to Jerusalem with its critical symbolic 
and literal implications for Palestinian statehood, and the ‘deal of the 
Century’ designed by Jared Kushner and David Friedman which 
gave the Sabbatian Israeli government the green light to 
substantially expand its already widespread program of building 
illegal Jewish-only settlements in the occupied land of the West 
Bank. This made a two-state ‘solution’ impossible by seizing all the 
land of a potential Palestinian homeland and that had been the plan 
since 1948 and then 1967 when the Arab-controlled Gaza Strip, West 
Bank, Sinai Peninsula and Syrian Golan Heights were occupied by 
Israel. All the talks about talks and road maps and delays have been 
buying time until the West Bank was physically occupied by Israeli 
real estate. Trump would have to be a monumentally ill-informed 
idiot not to see that this was the plan he was helping to complete. 
The Trump administration was in so many ways the Kushner 
administration which means the Netanyahu administration which 
means the Sabbatian administration. I understand why many 
opposing Cult fascism in all its forms gravitated to Trump, but he 


was a crucial part of the Sabbatian plan and I will deal with this in 
the next chapter. 


Joe Bitien (Democrat) 

A barely cognitive Joe Biden took over the presidency in January, 
2021, along with his fellow empty shell, Vice-President Kamala 
Harris, as the latest Sabbatian gofers to enter the White House. 
Names on the door may have changed and the ‘party’ — the force 
behind them remained the same as Zionists were appointed to a 
stream of pivotal areas relating to Sabbatian plans and policy. They 
included: Janet Yellen, Treasury Secretary, former head of the Federal 
Reserve, and still another ultra-Zionist running the US Treasury after 
Mnuchin (Trump), Lew and Geithner (Obama), and Summers and 
Rubin (Clinton); Anthony Blinken, Secretary of State; Wendy 
Sherman, Deputy Secretary of State (so that’s ‘Biden’s’ Sabbatian 
foreign policy sorted); Jeff Zients, White House coronavirus 
coordinator; Rochelle Walensky, head of the Centers for Disease 
Control; Rachel Levine, transgender deputy health secretary (that’s 
‘Covid’ hoax policy under control); Merrick Garland, Attorney 
General; Alejandro Mayorkas, Secretary of Homeland Security; Cass 
Sunstein, Homeland Security with responsibility for new 
immigration laws; Avril Haines, Director of National Intelligence; 
Anne Neuberger, National Security Agency cybersecurity director 
(note, cybersecurity); David Cohen, CIA Deputy Director; Ronald 
Klain, Biden’s Chief of Staff (see Rahm Emanuel); Eric Lander, a 
‘leading geneticist’, Office of Science and Technology Policy director 
(see Smart Grid, synthetic biology agenda); Jessica Rosenworcel, 
acting head of the Federal Communications Commission (FCC) 
which controls Smart Grid technology policy and electromagnetic 
communication systems including 5G. How can it be that so many 
pivotal positions are held by two-percent of the American 
population and 0.2 percent of the world population administration 
after administration no matter who is the president and what is the 
party? It’s a coincidence? Of course it’s not and this is why 
Sabbatians have built their colossal global web of interlocking ‘anti- 


hate’ hate groups to condemn anyone who asks these glaring 
questions as an ‘anti-Semite’. The way that Jewish people horrifically 
abused in Sabbatian-backed Nazi Germany are exploited to this end 
is stomach-turning and disgusting beyond words. 


Political fusion 

Sabbatian manipulation has reversed the roles of Republicans and 
Democrats and the same has happened in Britain with the 
Conservative and Labour Parties. Republicans and Conservatives 
were always labelled the ‘right’ and Democrats and Labour the ‘left’, 
but look at the policy positions now and the Democrat-Labour ‘left’ 
has moved further to the ‘right’ than Republicans and Conservatives 
under the banner of ‘Woke’, the Cult-created far-right tyranny. 
Where once the Democrat-Labour ‘left’ defended free speech and 
human rights they now seek to delete them and as I said earlier 
despite the ‘Covid’ fascism of the Jackboot Johnson Conservative 
government in the UK the Labour Party of leader Keir Starmer 
demanded even more extreme measures. The Labour Party has been 
very publicly absorbed by Sabbatians after a political and media 
onslaught against the previous leader, the weak and inept Jeremy 
Corbyn, over made-up allegations of ‘anti-Semitism’ both by him 
and his party. The plan was clear with this ‘anti-Semite’ propaganda 
and what was required in response was a swift and decisive ‘fuck 
off’ from Corbyn and a statement to expose the Anti-Semitism 
Industry (Sabbatian) attempt to silence Labour criticism of the Israeli 
government (Sabbatians) and purge the party of all dissent against 
the extremes of ultra-Zionism (Sabbatians). Instead Corbyn and his 
party fell to their knees and appeased the abusers which, by 
definition, is impossible. Appeasing one demand leads only to anew 
demand to be appeased until takeover is complete. Like I say — ‘fuck 
off’ would have been a much more effective policy and I have used it 
myself with great effect over the years when Sabbatians are on my 
case which is most of the time. I consider that fact a great 
compliment, by the way. The outcome of the Labour Party 
capitulation is that we now have a Sabbatian-controlled 


Conservative Party ‘opposed’ by a Sabbatian-controlled Labour 
Party in a one-party Sabbatian state that hurtles towards the 
extremes of tyranny (the Sabbatian cult agenda). In America the 
situation is the same. Labour’s Keir Starmer spends his days on his 
knees with his tongue out pointing to Tel Aviv, or I guess now 
Jerusalem, while Boris Johnson has an ‘anti-Semitism czar’ in the 
form of former Labour MP John Mann who keeps Starmer company 
on his prayer mat. 

Sabbatian influence can be seen in Jewish members of the Labour 
Party who have been ejected for criticism of Israel including those 
from families that suffered in Nazi Germany. Sabbatians despise real 
Jewish people and target them even more harshly because it is so 
much more difficult to dub them ‘anti-Semitic’ although in their 
desperation they do try. 


CHAPTER THREE 
The Pushbacker sting 


Until you realize how easy it is for your mind to be manipulated, you 
remain the puppet of someone else’s game 
Evita Ochel 


will use the presidencies of Trump and Biden to show how the 

manipulation of the one-party state plays out behind the illusion 
of political choice across the world. No two presidencies could — on 
the face of it — be more different and apparently at odds in terms of 
direction and policy. 

A Renegade Mind sees beyond the obvious and focuses on 
outcomes and consequences and not image, words and waffle. The 
Cult embarked on a campaign to divide America between those who 
blindly support its agenda (the mentality known as ‘Woke’) and 
those who are pushing back on where the Cult and its Sabbatians 
want to go. This presents infinite possibilities for dividing and ruling 
the population by setting them at war with each other and allows a 
perceptual ring fence of demonisation to encircle the Pushbackers in 
a modern version of the Little Big Horn in 1876 when American 
cavalry led by Lieutenant Colonel George Custer were drawn into a 
trap, surrounded and killed by Native American tribes defending 
their land of thousands of years from being seized by the 
government. In this modern version the roles are reversed and it’s 
those defending themselves from the Sabbatian government who are 
surrounded and the government that’s seeking to destroy them. This 
trap was set years ago and to explain how we must return to 2016 


and the emergence of Donald Trump as a candidate to be President 
of the United States. He set out to overcome the best part of 20 other 
candidates in the Republican Party before and during the primaries 
and was not considered by many in those early stages to have a 
prayer of living in the White House. The Republican Party was said 
to have great reservations about Trump and yet somehow he won 
the nomination. When you know how American politics works — 
politics in general — there is no way that Trump could have become 
the party’s candidate unless the Sabbatian-controlled ‘Neocons’ that 
run the Republican Party wanted that to happen. We saw the proof 
in emails and documents made public by WikiLeaks that the 
Democratic Party hierarchy, or Democons, systematically 
undermined the campaign of Bernie Sanders to make sure that 
Sabbatian gofer Hillary Clinton won the nomination to be their 
presidential candidate. If the Democons could do that then the 
Neocons in the Republican Party could have derailed Trump in the 
same way. But they didn’t and at that stage I began to conclude that 
Trump could well be the one chosen to be president. If that was the 
case the ‘why’ was pretty clear to see — the goal of dividing America 
between Cult agenda-supporting Wokers and Pushbackers who 
gravitated to Trump because he was telling them what they wanted 
to hear. His constituency of support had been increasingly ignored 
and voiceless for decades and profoundly through the eight years of 
Sabbatian puppet Barack Obama. Now here was someone speaking 
their language of pulling back from the incessant globalisation of 
political and economic power, the exporting of American jobs to 
China and elsewhere by ‘American’ (Sabbatian) corporations, the 
deletion of free speech, and the mass immigration policies that had 
further devastated job opportunities for the urban working class of 
all races and the once American heartlands of the Midwest. 


Beware the forked tongue 

Those people collectively sighed with relief that at last a political 
leader was apparently on their side, but another trait of the 
Renegade Mind is that you look even harder at people telling you 


what you want to hear than those who are telling you otherwise. 
Obviously as I said earlier people wish what they want to hear to be 
true and genuine and they are much more likely to believe that than 
someone saying what they don’t want to here and don’t want to be 
true. Sales people are taught to be skilled in eliciting by calculated 
questioning what their customers want to hear and repeating that 
back to them as their own opinion to get their targets to like and 
trust them. Assets of the Cult are also sales people in the sense of 
selling perception. To read Cult manipulation you have to play the 
long and expanded game and not fall for the Vaudeville show of 
party politics. Both American parties are vehicles for the Cult and 
they exploit them in different ways depending on what the agenda 
requires at that moment. Trump and the Republicans were used to 
be the focus of dividing America and isolating Pushbackers to open 
the way for a Biden presidency to become the most extreme in 
American history by advancing the full-blown Woke (Cult) agenda 
with the aim of destroying and silencing Pushbackers now labelled 
Nazi Trump supporters and white supremacists. 

Sabbatians wanted Trump in office for the reasons described by 
ultra-Zionist Saul Alinsky (1909-1972) who was promoting the Woke 
philosophy through ‘community organising’ long before anyone had 
heard of it. In those days it still went by its traditional name of 
Marxism. The reason for the manipulated Trump phenomenon was 
laid out in Alinsky’s 1971 book, Rules for Radicals, which was his 
blueprint for overthrowing democratic and other regimes and 
replacing them with Sabbatian Marxism. Not surprisingly his to-do 
list was evident in the Sabbatian French and Russian ‘Revolutions’ 
and that in China which will become very relevant in the next 
chapter about the ‘Covid’ hoax. Among Alinsky’s followers have 
been the deeply corrupt Barack Obama, House Speaker Nancy Pelosi 
and Hillary Clinton who described him as a ‘hero’. All three are 
Sabbatian stooges with Pelosi personifying the arrogant corrupt 
idiocy that so widely fronts up for the Cult inner core. Predictably as 
a Sabbatian advocate of the ‘light-bringer’ Alinsky features Lucifer 
on the dedication page of his book as the original radical who gained 


his own kingdom (‘Earth’ as we shall see). One of Alinsky’s golden 
radical rules was to pick an individual and focus all attention, hatred 
and blame on them and not to target faceless bureaucracies and 
corporations. Rules for Radicals is really a Sabbatian handbook with 
its contents repeatedly employed all over the world for centuries and 
why wouldn’t Sabbatians bring to power their designer-villain to be 
used as the individual on which all attention, hatred and blame was 
bestowed? This is what they did and the only question for me is how 
much Trump knew that and how much he was manipulated. A bit of 
both, I suspect. This was Alinsky’s Trump technique from a man 
who died in 1972. The technique has spanned history: 


Pick the target, freeze it, personalize it, polarize it. Don’t try to attack abstract corporations or 
bureaucracies. Identify a responsible individual. Ignore attempts to shift or spread the blame. 


From the moment Trump came to illusory power everything was 
about him. It wasn’t about Republican policy or opinion, but all 
about Trump. Everything he did was presented in negative, 
derogatory and abusive terms by the Sabbatian-dominated media 
led by Cult operations such as CNN, MSNBC, The New York Times 
and the Jeff Bezos-owned Washington Post — ‘Pick the target, freeze it, 
personalize it, polarize it.’ Trump was turned into a demon to be 
vilified by those who hated him and a demi-god loved by those who 
worshipped him. This, in turn, had his supporters, too, presented as 
equally demonic in preparation for the punchline later down the line 
when Biden was about to take office. It was here’s a Trump, there’s a 
Trump, everywhere a Trump, Trump. Virtually every news story or 
happening was filtered through the lens of ‘The Donald’. You loved 
him or hated him and which one you chose was said to define you as 
Satan’s spawn or a paragon of virtue. Even supporting some Trump 
policies or statements and not others was enough for an assault on 
your character. No shades of grey were or are allowed. Everything is 
black and white (literally and figuratively). A Californian I knew had 
her head utterly scrambled by her hatred for Trump while telling 
people they should love each other. She was so totally consumed by 


Trump Derangement Syndrome as it became to be known that this 
glaring contradiction would never have occurred to her. By 
definition anyone who criticised Trump or praised his opponents 
was a hero and this lady described Joe Biden as ‘a kind, honest 
gentleman’ when he’s a provable liar, mega-crook and vicious piece 
of work to boot. Sabbatians had indeed divided America using 
Trump as the fall-guy and all along the clock was ticking on the 
consequences for his supporters. 


In hock to his masters 

Trump gave Sabbatians via Israel almost everything they wanted in 
his four years. Ask and you shall receive was the dynamic between 
himself and Benjamin Netanyahu orchestrated by Trump’s ultra- 
Zionist son-in-law Jared Kushner, his ultra-Zionist Ambassador to 
Israel, David Friedman, and ultra-Zionist ‘Israel adviser’, Jason 
Greenblatt. The last two were central to the running and protecting 
from collapse of his business empire, the Trump Organisation, and 
colossal business failures made him forever beholding to Sabbatian 
networks that bailed him out. By the start of the 1990s Trump owed 
$4 billion to banks that he couldn’t pay and almost $1billion of that 
was down to him personally and not his companies. This mega- 
disaster was the result of building two new casinos in Atlantic City 
and buying the enormous Taj Mahal operation which led to 
crippling debt payments. He had borrowed fantastic sums from 72 
banks with major Sabbatian connections and although the scale of 
debt should have had him living in a tent alongside the highway 
they never foreclosed. A plan was devised to lift Trump from the 
mire by BT Securities Corporation and Rothschild Inc. and the case 
was handled by Wilber Ross who had worked for the Rothschilds for 
27 years. Ross would be named US Commerce Secretary after 
Trump’s election. Another crucial figure in saving Trump was ultra- 
Zionist ‘investor’ Carl Icahn who bought the Taj Mahal casino. Icahn 
was made special economic adviser on financial regulation in the 
Trump administration. He didn’t stay long but still managed to find 
time to make a tidy sum of a reported $31.3 million when he sold his 


holdings affected by the price of steel three days before Trump 
imposed a 235 percent tariff on steel imports. What amazing bits of 
luck these people have. Trump and Sabbatian operatives have long 
had a close association and his mentor and legal adviser from the 
early 1970s until 1986 was the dark and genetically corrupt ultra- 
Zionist Roy Cohn who was chief counsel to Senator Joseph 
McCarthy’s ‘communist’ witch-hunt in the 1950s. Esquire magazine 
published an article about Cohn with the headline ‘Don’t mess with 
Roy Cohn’. He was described as the most feared lawyer in New York 
and ‘a ruthless master of dirty tricks ... [with] ... more than one Mafia 
Don on speed dial’. Cohn’s influence, contacts, support and 
protection made Trump a front man for Sabbatians in New York 
with their connections to one of Cohn’s many criminal employers, 
the ‘Russian’ Sabbatian Mafia. Israel-centric media mogul Rupert 
Murdoch was introduced to Trump by Cohn and they started a long 
friendship. Cohn died in 1986 weeks after being disbarred for 
unethical conduct by the Appellate Division of the New York State 
Supreme Court. The wheels of justice do indeed run slow given the 
length of Cohn’s crooked career. 


QAnon-sense 

We are asked to believe that Donald Trump with his fundamental 
connections to Sabbatian networks and operatives has been leading 
the fight to stop the Sabbatian agenda for the fascistic control of 
America and the world. Sure he has. A man entrapped during his 
years in the White House by Sabbatian operatives and whose biggest 
financial donor was casino billionaire Sheldon Adelson who was 
Sabbatian to his DNA?? Oh, do come on. Trump has been used to 
divide America and isolate Pushbackers on the Cult agenda under 
the heading of ‘Trump supporters’, ‘insurrectionists’ and ‘white 
supremacists’. The US Intelligence/Mossad Psyop or psychological 
operation known as QAnon emerged during the Trump years as a 
central pillar in the Sabbatian campaign to lead Pushbackers into the 
trap set by those that wished to destroy them. I knew from the start 
that QAnon was a scam because I had seen the same scenario many 


times before over 30 years under different names and I had written 
about one in particular in the books. “Not again’ was my reaction 
when QAnon came to the fore. The same script is pulled out every 
few years and a new name added to the letterhead. The story always 
takes the same form: ‘Insiders’ or ‘the good guys’ in the government- 
intelligence-military ‘Deep State’ apparatus were going to instigate 
mass arrests of the ‘bad guys’ which would include the Rockefellers, 
Rothschilds, Barack Obama, Hillary Clinton, George Soros, etc., etc. 
Dates are given for when the ‘good guys’ are going to move in, but 
the dates pass without incident and new dates are given which pass 
without incident. The central message to Pushbackers in each case is 
that they don’t have to do anything because there is ‘a plan’ and it is 
all going to be sorted by the ‘good guys’ on the inside. ‘Trust the 
plan’ was a QAnon mantra when the only plan was to misdirect 
Pushbackers into putting their trust in a Psyop they believed to be 
real. Beware, beware, those who tell you what you want to hear and 
always check it out. Right up to Biden’s inauguration QAnon was 
still claiming that ‘the Storm’ was coming and Trump would stay on 
as president when Biden and his cronies were arrested and jailed. It 
was never going to happen and of course it didn’t, but what did 
happen as a result provided that punchline to the Sabbatian 
Trump/QAnon Psyop. 

On January 6th, 2021, a very big crowd of Trump supporters 
gathered in the National Mall in Washington DC down from the 
Capitol Building to protest at what they believed to be widespread 
corruption and vote fraud that stopped Trump being re-elected for a 
second term as president in November, 2020. I say as someone that 
does not support Trump or Biden that the evidence is clear that 
major vote-fixing went on to favour Biden, a man with cognitive 
problems so advanced he can often hardly string a sentence together 
without reading the words written for him on the Teleprompter. 
Glaring ballot discrepancies included serious questions about 
electronic voting machines that make vote rigging a comparative 
cinch and hundreds of thousands of paper votes that suddenly 
appeared during already advanced vote counts and virtually all of 


them for Biden. Early Trump leads in crucial swing states suddenly 
began to close and disappear. The pandemic hoax was used as the 
excuse to issue almost limitless numbers of mail-in ballots with no 
checks to establish that the recipients were still alive or lived at that 
address. They were sent to streams of people who had not even 
asked for them. Private organisations were employed to gather these 
ballots and who knows what they did with them before they turned 
up at the counts. The American election system has been 
manipulated over decades to become a sick joke with more holes 
than a Swiss cheese for the express purpose of dictating the results. 
Then there was the criminal manipulation of information by 
Sabbatian tech giants like Facebook, Twitter and Google-owned 
YouTube which deleted pro-Irump, anti-Biden accounts and posts 
while everything in support of Biden was left alone. Sabbatians 
wanted Biden to win because after the dividing of America it was 
time for full-on Woke and every aspect of the Cult agenda to be 
unleashed. 


Hunter gatherer 

Extreme Silicon Valley bias included blocking information by the 
New York Post exposing a Biden scandal that should have ended his 
bid for president in the final weeks of the campaign. Hunter Biden, 
his monumentally corrupt son, is reported to have sent a laptop to 
be repaired at a local store and failed to return for it. Time passed 
until the laptop became the property of the store for non-payment of 
the bill. When the owner saw what was on the hard drive he gave a 
copy to the FBI who did nothing even though it confirmed 
widespread corruption in which the Joe Biden family were using his 
political position, especially when he was vice president to Obama, 
to make multiple millions in countries around the world and most 
notably Ukraine and China. Hunter Biden’s one-time business 
partner Tony Bobulinski went public when the story broke in the 
New York Post to confirm the corruption he saw and that Joe Biden 
not only knew what was going on he also profited from the spoils. 
Millions were handed over by a Chinese company with close 


connections — like all major businesses in China — to the Chinese 
communist party of President Xi Jinping. Joe Biden even boasted at a 
meeting of the Cult’s World Economic Forum that as vice president 
he had ordered the government of Ukraine to fire a prosecutor. What 
he didn’t mention was that the same man just happened to be 
investigating an energy company which was part of Hunter Biden’s 
corrupt portfolio. The company was paying him big bucks for no 
other reason than the influence his father had. Overnight Biden’s 
presidential campaign should have been over given that he had lied 
publicly about not knowing what his son was doing. Instead almost 
the entire Sabbatian-owned mainstream media and Sabbatian- 
owned Silicon Valley suppressed circulation of the story. This alone 
went a mighty way to rigging the election of 2020. Cult assets like 
Mark Zuckerberg at Facebook also spent hundreds of millions to be 
used in support of Biden and vote ‘administration’. 


The Cult had used Trump as the focus to divide America and was 
now desperate to bring in moronic, pliable, corrupt Biden to 
complete the double-whammy. No way were they going to let little 
things like the will of the people thwart their plan. Silicon Valley 
widely censored claims that the election was rigged because it was 
rigged. For the same reason anyone claiming it was rigged was 
denounced as a ‘white supremacist’ including the pathetically few 
Republican politicians willing to say so. Right across the media 
where the claim was mentioned it was described as a ‘false claim’ 
even though these excuses for ‘journalists’ would have done no 
research into the subject whatsoever. Trump won seven million more 
votes than any sitting president had ever achieved while somehow a 
cognitively-challenged soon to be 78-year-old who was hidden away 
from the public for most of the campaign managed to win more 
votes than any presidential candidate in history. It makes no sense. 
You only had to see election rallies for both candidates to witness the 
enthusiasm for Trump and the apathy for Biden. Tens of thousands 
would attend Trump events while Biden was speaking in empty car 
parks with often only television crews attending and framing their 
shots to hide the fact that no one was there. It was pathetic to see 


footage come to light of Biden standing at a podium making 
speeches only to TV crews and party fixers while reading the words 
written for him on massive Teleprompter screens. So, yes, those 
protestors on January 6th had a point about election rigging, but 
some were about to walk into a trap laid for them in Washington by 
the Cult Deep State and its QAnon Psyop. This was the Capitol Hill 
riot ludicrously dubbed an ‘insurrection’. 


The spider and the fly 

Renegade Minds know there are not two ‘sides’ in politics, only one 
side, the Cult, working through all ‘sides’. It’s a stage show, a puppet 
show, to direct the perceptions of the population into focusing on 
diversions like parties and candidates while missing the puppeteers 
with their hands holding all the strings. The Capitol Hill 
‘insurrection’ brings us back to the Little Big Horn. Having created 
two distinct opposing groupings — Woke and Pushbackers — the trap 
was about to be sprung. Pushbackers were to be encircled and 
isolated by associating them all in the public mind with Trump and 
then labelling Trump as some sort of Confederate leader. I knew 
immediately that the Capitol riot was a set-up because of two things. 
One was how easy the rioters got into the building with virtually no 
credible resistance and secondly I could see — as with the ‘Covid’ 
hoax in the West at the start of 2020 — how the Cult could exploit the 
situation to move its agenda forward with great speed. My 
experience of Cult techniques and activities over more than 30 years 
has showed me that while they do exploit situations they haven't 
themselves created this never happens with events of fundamental 
agenda significance. Every time major events giving cultists the 
excuse to rapidly advance their plan you find they are manipulated 
into being for the specific reason of providing that excuse — Problem- 
Reaction-Solution. Only a tiny minority of the huge crowd of 
Washington protestors sought to gain entry to the Capitol by 
smashing windows and breaching doors. That didn’t matter. The 
whole crowd and all Pushbackers, even if they did not support 
Trump, were going to be lumped together as dangerous 


insurrectionists and conspiracy theorists. The latter term came into 
widespread use through a CIA memo in the 1960s aimed at 
discrediting those questioning the nonsensical official story of the 
Kennedy assassination and it subsequently became widely 
employed by the media. It’s still being used by inept ‘journalists’ 
with no idea of its origin to discredit anyone questioning anything 
that authority claims to be true. When you are perpetrating a 
conspiracy you need to discredit the very word itself even though 
the dictionary definition of conspiracy is merely ‘the activity of 
secretly planning with other people to do something bad or illegal’ 
and ‘a general agreement to keep silent about a subject for the 
purpose of keeping it secret’. On that basis there are conspiracies 
almost wherever you look. For obvious reasons the Cult and its 
lapdog media have to claim there are no conspiracies even though 
the word appears in state laws as with conspiracy to defraud, to 
murder, and to corrupt public morals. 


Agent provocateurs are widely used by the Cult Deep State to 
manipulate genuine people into acting in ways that suit the desired 
outcome. By genuine in this case I mean protestors genuinely 
supporting Trump and claims that the election was stolen. In among 
them, however, were agents of the state wearing the garb of Trump 
supporters and QAnon to pump-prime the Capital riot which some 
genuine Trump supporters naively fell for. I described the situation 
as ‘Come into my parlour said the spider to the fly’. Leaflets 
appeared through the Woke paramilitary arm Antifa, the anti-fascist 
fascists, calling on supporters to turn up in Washington looking like 
Trump supporters even though they hated him. Some of those 
arrested for breaching the Capitol Building were sourced to Antifa 
and its stable mate Black Lives Matter. Both organisations are funded 
by Cult billionaires and corporations. One man charged for the riot 
was according to his lawyer a former FBI agent who had held top 
secret security clearance for 40 years. Attorney Thomas Plofchan said 
of his client, 66-year-old Thomas Edward Caldwell: 


He has held a Top Secret Security Clearance since 1979 and has undergone multiple Special 
Background Investigations in support of his clearances. After retiring from the Navy, he 


worked as a section chief for the Federal Bureau of Investigation from 2009-2010 as a GS-12 
[mid-level employee]. 


He also formed and operated a consulting firm performing work, often classified, for U.S 
government customers including the US. Drug Enforcement Agency, Department of Housing 
and Urban Development, the US Coast Guard, and the US Army Personnel Command. 


A judge later released Caldwell pending trial in the absence of 
evidence about a conspiracy or that he tried to force his way into the 
building. The New York Post reported a ‘law enforcement source’ as 
saying that ‘at least two known Antifa members were spotted’ on 
camera among Trump supporters during the riot while one of the 
rioters arrested was John Earle Sullivan, a seriously extreme Black 
Lives Matter Trump-hater from Utah who was previously arrested 
and charged in July, 2020, over a BLM-Antifa riot in which drivers 
were threatened and one was shot. Sullivan is the founder of Utah- 
based Insurgence USA which is an affiliate of the Cult-created-and- 
funded Black Lives Matter movement. Footage appeared and was 
then deleted by Twitter of Trump supporters calling out Antifa 
infiltrators and a group was filmed changing into pro-Trump 
clothing before the riot. Security at the building was pathetic — as 
planned. Colonel Leroy Fletcher Prouty, a man with long experience 
in covert operations working with the US security apparatus, once 
described the tell-tale sign to identify who is involved in an 
assassination. He said: 


No one has to direct an assassination — it happens. The active role is played secretly by 
permitting it to happen. This is the greatest single clue. Who has the power to call off or 
reduce the usual security precautions? 


This principle applies to many other situations and certainly to the 
Capitol riot of January 6th, 2021. 


The sting 

With such a big and potentially angry crowd known to be gathering 
near the Capitol the security apparatus would have had a major 
police detail to defend the building with National Guard troops on 


standby given the strength of feeling among people arriving from all 
over America encouraged by the QAnon Psyop and statements by 
Donald Trump. Instead Capitol Police ‘security’ was flimsy, weak, 
and easily breached. The same number of officers was deployed as 
on a regular day and that is a blatant red flag. They were not staffed 
or equipped for a possible riot that had been an obvious possibility 
in the circumstances. No protective and effective fencing worth the 
name was put in place and there were no contingency plans. The 
whole thing was basically a case of standing aside and waving 
people in. Once inside police mostly backed off apart from one 
Capitol police officer who ridiculously shot dead unarmed Air Force 
veteran protestor Ashli Babbitt without a warning as she climbed 
through a broken window. The ‘investigation’ refused to name or 
charge the officer after what must surely be considered a murder in 
the circumstances. They just lifted a carpet and swept. The story was 
endlessly repeated about five people dying in the ‘armed 
insurrection’ when there was no report of rioters using weapons. 
Apart from Babbitt the other four died from a heart attack, strokes 
and apparently a drug overdose. Capitol police officer Brian Sicknick 
was reported to have died after being bludgeoned with a fire 
extinguisher when he was alive after the riot was over and died later 
of what the Washington Medical Examiner’s Office said was a stroke. 
Sicknick had no external injuries. The lies were delivered like rapid 
fire. There was a narrative to build with incessant repetition of the lie 
until the lie became the accepted ‘everybody knows that’ truth. The 
‘Big Lie’ technique of Nazi Propaganda Minister Joseph Goebbels is 
constantly used by the Cult which was behind the Nazis and is 
today behind the ‘Covid’ and ‘climate change’ hoaxes. Goebbels 
said: 


If you tell a lie big enough and keep repeating it, people will eventually come to believe it. 
The lie can be maintained only for such time as the State can shield the people from the 
political, economic and/or military consequences of the lie. It thus becomes vitally important 
for the State to use all of its powers to repress dissent, for the truth is the mortal enemy of the 
lie, and thus by extension, the truth is the greatest enemy of the State. 


Most protestors had a free run of the Capitol Building. This 
allowed pictures to be taken of rioters in iconic parts of the building 
including the Senate chamber which could be used as propaganda 
images against all Pushbackers. One Congresswoman described the 
scene as ‘the worst kind of non-security anybody could ever 
imagine’. Well, the first part was true, but someone obviously did 
imagine it and made sure it happened. Some photographs most 
widely circulated featured people wearing QAnon symbols and now 
the Psyop would be used to dub all QAnon followers with the 
ubiquitous fit-all label of “white supremacist’ and ‘insurrectionists’. 
When a Muslim extremist called Noah Green drove his car at two 
police officers at the Capitol Building killing one in April, 2021, there 
was no such political and media hysteria. They were just 
disappointed he wasn’t white. 


The witch-hunt 


Government prosecutor Michael Sherwin, an aggressive, dark-eyed, 
professional Rottweiler led the ‘investigation’ and to call it over the 
top would be to understate reality a thousand fold. Hundreds were 
tracked down and arrested for the crime of having the wrong 
political views and people were jailed who had done nothing more 
than walk in the building, committed no violence or damage to 
property, took a few pictures and left. They were labelled a ‘threat to 
the Republic’ while Biden sat in the White House signing executive 
orders written for him that were dismantling ‘the Republic’. Even 
when judges ruled that a mother and son should not be in jail the 
government kept them there. Some of those arrested have been 
badly beaten by prison guards in Washington and lawyers for one 
man said he suffered a fractured skull and was made blind in one 
eye. Meanwhile a woman is shot dead for no reason by a Capitol 
Police officer and we are not allowed to know who he is never mind 
what has happened to him although that will be nothing. The Cult’s 
QAnon/Trump sting to identify and isolate Pushbackers and then 
target them on the road to crushing and deleting them was a 
resounding success. You would have thought the Russians had 


invaded the building at gunpoint and lined up senators for a firing 
squad to see the political and media reaction. Congresswoman 
Alexandria Ocasio-Cortez is a child in a woman’s body, a terrible- 
twos, me, me, me, Woker narcissist of such proportions that words 
have no meaning. She said she thought she was going to die when 
‘insurrectionists’ banged on her office door. It turned out she wasn’t 
even in the Capitol Building when the riot was happening and the 
‘banging’ was a Capitol Police officer. She referred to herself as a 
‘survivor’ which is an insult to all those true survivors of violent and 
sexual abuse while she lives her pampered and privileged life 
talking drivel for a living. Her Woke colleague and fellow mega- 
narcissist Rashida Tlaib broke down describing the devastating 
effect on her, too, of not being in the building when the rioters were 
there. Ocasio-Cortez and Tlaib are members of a fully-Woke group 
of Congresswomen known as ‘The Squad’ along with Ilhan Omar 
and Ayanna Pressley. The Squad from what I can see can be 
identified by its vehement anti-white racism, anti-white men agenda, 
and, as always in these cases, the absence of brain cells on active 
duty. 

The usual suspects were on the riot case immediately in the form 
of Democrat ultra-Zionist senators and operatives Chuck Schumer 
and Adam Schiff demanding that Trump be impeached for ‘his part 
in the insurrection’. The same pair of prats had led the failed 
impeachment of Trump over the invented ‘Russia collusion’ 
nonsense which claimed Russia had helped Trump win the 2016 
election. I didn’t realise that Tel Aviv had been relocated just outside 
Moscow. I must find an up-to-date map. The Russia hoax was a 
Sabbatian operation to keep Trump occupied and impotent and to 
stop any rapport with Russia which the Cult wants to retain as a 
perceptual enemy to be pulled out at will. Puppet Biden began 
attacking Russia when he came to office as the Cult seeks more 
upheaval, division and war across the world. A two-year stage show 
‘Russia collusion inquiry’ headed by the not-very-bright former 9/11 
FBI chief Robert Mueller, with support from 19 lawyers, 40 FBI 
agents plus intelligence analysts, forensic accountants and other 


staff, devoured tens of millions of dollars and found no evidence of 
Russia collusion which a ten-year-old could have told them on day 
one. Now the same moronic Schumer and Schiff wanted a second 
impeachment of Trump over the Capitol ‘insurrection’ (riot) which 
the arrested development of Schumer called another ‘Pearl Harbor’ 
while others compared it with 9/11 in which 3,000 died and, in the 
case of CNN, with the Rwandan genocide in the 1990s in which an 
estimated 500,000 to 600,000 were murdered, between 250, 000 and 
500,000 women were raped, and populations of whole towns were 
hacked to death with machetes. To make those comparisons purely 
for Cult political reasons is beyond insulting to those that suffered 
and lost their lives and confirms yet again the callous inhumanity 
that we are dealing with. Schumer is a monumental idiot and so is 
Schiff, but they serve the Cult agenda and do whatever they’re told 
so they get looked after. Talking of idiots — another inane man who 
spanned the Russia and Capitol impeachment attempts was Senator 
Eric Swalwell who had the nerve to accuse Trump of collusion with 
the Russians while sleeping with a Chinese spy called Christine Fang 
or ‘Fang Fang’ which is straight out of a Bond film no doubt starring 
Klaus Schwab as the bloke living on a secret island and controlling 
laser weapons positioned in space and pointing at world capitals. 
Fang Fang plays the part of Bond’s infiltrator girlfriend which I’m 
sure she would enjoy rather more than sharing a bed with the 
brainless Swalwell, lying back and thinking of China. The FBI 
eventually warned Swalwell about Fang Fang which gave her time 
to escape back to the Chinese dictatorship. How very thoughtful of 
them. The second Trump impeachment also failed and hardly 
surprising when an impeachment is supposed to remove a sitting 
president and by the time it happened Trump was no longer 
president. These people are running your country America, well, 
officially anyway. Terrifying isn’t it? 


Outcomes tell the story - always 
The outcome of all this — and it’s the outcome on which Renegade 
Minds focus, not the words — was that a vicious, hysterical and 


obviously pre-planned assault was launched on Pushbackers to 
censor, silence and discredit them and even targeted their right to 
earn a living. They have since been condemned as ‘domestic 
terrorists’ that need to be treated like Al-Qaeda and Islamic State. 
‘Domestic terrorists’ is a label the Cult has been trying to make stick 
since the period of the Oklahoma bombing in 1995 which was 
blamed on ‘far-right domestic terrorists’. If you read The Trigger you 
will see that the bombing was clearly a Problem-Reaction-Solution 
carried out by the Deep State during a Bill Clinton administration so 
corrupt that no dictionary definition of the term would even nearly 
suffice. Nearly 30, 000 troops were deployed from all over America 
to the empty streets of Washington for Biden’s inauguration. Ten 
thousand of them stayed on with the pretext of protecting the capital 
from insurrectionists when it was more psychological programming 
to normalise the use of the military in domestic law enforcement in 
support of the Cult plan for a police-military state. Biden’s fascist 
administration began a purge of ‘wrong-thinkers’ in the military 
which means anyone that is not on board with Woke. The Capitol 
Building was surrounded by a fence with razor wire and the Land of 
the Free was further symbolically and literally dismantled. The circle 
was completed with the installation of Biden and the exploitation of 
the QAnon Psyop. 

America had never been so divided since the civil war of the 19th 
century, Pushbackers were isolated and dubbed terrorists and now, 
as was always going to happen, the Cult immediately set about 
deleting what little was left of freedom and transforming American 
society through a swish of the hand of the most controlled 
‘president’ in American history leading (officially at least) the most 
extreme regime since the country was declared an independent state 
on July 4th, 1776. Biden issued undebated, dictatorial executive 
orders almost by the hour in his opening days in office across the 
whole spectrum of the Cult wish-list including diluting controls on 
the border with Mexico allowing thousands of migrants to illegally 
enter the United States to transform the demographics of America 
and import an election-changing number of perceived Democrat 


voters. Then there were Biden deportation amnesties for the already 
illegally resident (estimated to be as high as 20 or even 30 million). A 
bill before Congress awarded American citizenship to anyone who 
could prove they had worked in agriculture for just 180 days in the 
previous two years as ‘Big Ag’ secured its slave labour long-term. 
There were the plans to add new states to the union such as Puerto 
Rico and making Washington DC a state. They are all parts of a plan 
to ensure that the Cult-owned Woke Democrats would be 
permanently in power. 


Border — what border? 

I have exposed in detail in other books how mass immigration into 
the United States and Europe is the work of Cult networks fuelled by 
the tens of billions spent to this and other ends by George Soros and 
his global Open Society (open borders) Foundations. The impact can 
be seen in America alone where the population has increased by 100 
million in little more than 30 years mostly through immigration. I 
wrote in The Answer that the plan was to have so many people 
crossing the southern border that the numbers become unstoppable 
and we are now there under Cult-owned Biden. El Salvador in 
Central America puts the scale of what is happening into context. A 
third of the population now lives in the United States, much of it 
illegally, and many more are on the way. The methodology is to 
crush Central and South American countries economically and 
spread violence through machete-wielding psychopathic gangs like 
MS-13 based in El Salvador and now operating in many American 
cities. Biden-imposed lax security at the southern border means that 
it is all but open. He said before his ‘election’ that he wanted to see a 
surge towards the border if he became president and that was the 
green light for people to do just that after election day to create the 
human disaster that followed for both America and the migrants. 
When that surge came the imbecilic Alexandria Ocasio-Cortez said it 
wasn’t a ‘surge’ because they are ‘children, not insurgents’ and the 
term ‘surge’ (used by Biden) was a claim of ‘white supremacists’. 


This disingenuous lady may one day enter the realm of the most 
basic intelligence, but it won’t be any time soon. 


Sabbatians and the Cult are in the process of destroying America 
by importing violent people and gangs in among the genuine to 
terrorise American cities and by overwhelming services that cannot 
cope with the sheer volume of new arrivals. Something similar is 
happening in Europe as Western society in general is targeted for 
demographic and cultural transformation and upheaval. The plan 
demands violence and crime to create an environment of 
intimidation, fear and division and Soros has been funding the 
election of district attorneys across America who then stop 
prosecuting many crimes, reduce sentences for violent crimes and 
free as many violent criminals as they can. Sabbatians are creating 
the chaos from which order — their order — can respond in a classic 
Problem-Reaction-Solution. A Freemasonic moto says ‘Ordo Ab 
Chao’ (Order out of Chaos) and this is why the Cult is constantly 
creating chaos to impose a new ‘order’. Here you have the reason 
the Cult is constantly creating chaos. The ‘Covid’ hoax can be seen 
with those entering the United States by plane being forced to take a 
‘Covid’ test while migrants flooding through southern border 
processing facilities do not. Nothing is put in the way of mass 
migration and if that means ignoring the government’s own ‘Covid’ 
rules then so be it. They know it’s all bullshit anyway. Any pushback 
on this is denounced as ‘racist’ by Wokers and Sabbatian fronts like 
the ultra-Zionist Anti-Defamation League headed by the appalling 
Jonathan Greenblatt which at the same time argues that Israel should 
not give citizenship and voting rights to more Palestinian Arabs or 
the ‘Jewish population’ (in truth the Sabbatian network) will lose 
control of the country. 


Society-changing numbers 

Biden’s masters have declared that countries like El Salvador are so 
dangerous that their people must be allowed into the United States 
for humanitarian reasons when there are fewer murders in large 
parts of many Central American countries than in US cities like 


Baltimore. That is not to say Central America cannot be a dangerous 
place and Cult-controlled American governments have been making 
it so since way back, along with the dismantling of economies, in a 
long-term plan to drive people north into the United States. Parts of 
Central America are very dangerous, but in other areas the story is 
being greatly exaggerated to justify relaxing immigration criteria. 
Migrants are being offered free healthcare and education in the 
United States as another incentive to head for the border and there is 
no requirement to be financially independent before you can enter to 
prevent the resources of America being drained. You can’t blame 
migrants for seeking what they believe will be a better life, but they 
are being played by the Cult for dark and nefarious ends. The 
numbers since Biden took office are huge. In February, 2021, more 
than 100,000 people were known to have tried to enter the US 
illegally through the southern border (it was 34,000 in the same 
month in 2020) and in March it was 170,000 — a 418 percent increase 
on March, 2020. These numbers are only known people, not the ones 
who get in unseen. The true figure for migrants illegally crossing the 
border in a single month was estimated by one congressman at 
250,000 and that number will only rise under Biden’s current policy. 
Gangs of murdering drug-running thugs that control the Mexican 
side of the border demand money — thousands of dollars — to let 
migrants cross the Rio Grande into America. At the same time gun 
battles are breaking out on the border several times a week between 
rival Mexican drug gangs (which now operate globally) who are 
equipped with sophisticated military-grade weapons, grenades and 
armoured vehicles. While the Capitol Building was being ‘protected’ 
from a non-existent ‘threat’ by thousands of troops, and others were 
still deployed at the time in the Cult Neocon war in Afghanistan, the 
southern border of America was left to its fate. This is not 
incompetence, it is cold calculation. 

By March, 2021, there were 17,000 unaccompanied children held at 
border facilities and many of them are ensnared by people traffickers 
for paedophile rings and raped on their journey north to America. 
This is not conjecture — this is fact. Many of those designated 


children are in reality teenage boys or older. Meanwhile Wokers 
posture their self-purity for encouraging poor and tragic people to 
come to America and face this nightmare both on the journey and at 
the border with the disgusting figure of House Speaker Nancy Pelosi 
giving disingenuous speeches about caring for migrants. The 
womans evil. Wokers condemned Trump for having children in 
cages at the border (so did Obama, Shhhh), but now they are sleeping 
on the floor without access to a shower with one border facility 729 
percent over capacity. The Biden insanity even proposed flying 
migrants from the southern border to the northern border with 
Canada for ‘processing’. The whole shambles is being overseen by 
ultra-Zionist Secretary of Homeland Security, the moronic liar 
Alejandro Mayorkas, who banned news cameras at border facilities 
to stop Americans seeing what was happening. Mayorkas said there 
was not a ban on news crews; it was just that they were not allowed 
to film. Alongside him at Homeland Security is another ultra-Zionist 
Cass Sunstein appointed by Biden to oversee new immigration laws. 
Sunstein despises conspiracy researchers to the point where he 
suggests they should be banned or taxed for having such views. The 
man is not bonkers or anything. He’s perfectly well-adjusted, but 
adjusted to what is the question. Criticise what is happening and 
you are a ‘white supremacist’ when earlier non-white immigrants 
also oppose the numbers which effect their lives and opportunities. 
Black people in poor areas are particularly damaged by uncontrolled 
immigration and the increased competition for work opportunities 
with those who will work for less. They are also losing voting power 
as Hispanics become more dominant in former black areas. It’s a 
downward spiral for them while the billionaires behind the policy 
drone on about how much they care about black people and 
‘racism’. None of this is about compassion for migrants or black 
people — that’s just wind and air. Migrants are instead being 
mercilessly exploited to transform America while the countries they 
leave are losing their future and the same is true in Europe. Mass 
immigration may now be the work of Woke Democrats, but it can be 
traced back to the 1986 Immigration Reform and Control Act (it 


wasn’t) signed into law by Republican hero President Ronald 
Reagan which gave amnesty to millions living in the United States 
illegally and other incentives for people to head for the southern 
border. Here we have the one-party state at work again. 


Almost every aspect of what I have been exposing as the Cult 
agenda was on display in even the first days of ‘Biden’ with silencing 
of Pushbackers at the forefront of everything. A Renegade Mind will 
view the Trump years and QAnon in a very different light to their 
supporters and advocates as the dots are connected. The 
QAnon/Trump Psyop has given the Cult all it was looking for. We 
may not know how much, or little, that Trump realised he was being 
used, but that’s a side issue. This pincer movement produced the 
desired outcome of dividing America and having Pushbackers 
isolated. To turn this around we have to look at new routes to 
empowerment which do not include handing our power to other 
people and groups through what I will call the ‘Save Me Syndrome’ 
—‘I want someone else to do it so that I don’t have to’. We have seen 
this at work throughout human history and the QAnon/Trump 
Psyop is only the latest incarnation alongside all the others. Religion 
is an obvious expression of this when people look to a ‘god’ or priest 
to save them or tell them how to be saved and then there are ‘save 
me’ politicians like Trump. Politics is a diversion and not a ‘saviour’. 
It is a means to block positive change, not make it possible. 


Save Me Syndrome always comes with the same repeating theme 
of handing your power to whom or what you believe will save you 
while your real ‘saviour’ stares back from the mirror every morning. 
Renegade Minds are constantly vigilant in this regard and always 
asking the question ‘What can I do?’ rather than ‘What can someone 
else do for me?’ Gandhi was right when he said: “You must be the 
change you want to see in the world.’ We are indeed the people we 
have been waiting for. We are presented with a constant raft of 
reasons to concede that power to others and forget where the real 
power is. Humanity has the numbers and the Cult does not. It has to 


use diversion and division to target the unstoppable power that 
comes from unity. Religions, governments, politicians, corporations, 
media, QAnon, are all different manifestations of this power- 
diversion and dilution. Refusing to give your power to governments 
and instead handing it to Trump and QAnon is not to take a new 
direction, but merely to recycle the old one with new names on the 
posters. I will explore this phenomenon as we proceed and how to 
break the cycles and recycles that got us here through the mists of 
repeating perception and so repeating history. 

For now we shall turn to the most potent example in the entire 
human story of the consequences that follow when you give your 
power away. I am talking, of course, of the ‘Covid’ hoax. 


CHAPTER FOUR 
‘Covid': Calculated catastrophe 


Facts are threatening to those invested in fraud 
DaShanne Stokes 


e can easily unravel the real reason for the ‘Covid pandemic’ 

hoax by employing the Renegade Mind methodology that I 
have outlined this far. We’ll start by comparing the long-planned 
Cult outcome with the ‘Covid pandemic’ outcome. Know the 
outcome and you'll see the journey. 

I have highlighted the plan for the Hunger Games Society which 
has been in my books for so many years with the very few 
controlling the very many through ongoing dependency. To create 
this dependency it is essential to destroy independent livelihoods, 
businesses and employment to make the population reliant on the 
state (the Cult) for even the basics of life through a guaranteed 
pittance income. While independence of income remained these Cult 
ambitions would be thwarted. With this knowledge it was easy to 
see where the ‘pandemic’ hoax was going once talk of ‘lockdowns’ 
began and the closing of all but perceived ‘essential’ businesses to 
‘save’ us from an alleged ‘deadly virus’. Cult corporations like 
Amazon and Walmart were naturally considered ‘essential’ while 
mom and pop shops and stores had their doors closed by fascist 
decree. As a result with every new lockdown and new regulation 
more small and medium, even large businesses not owned by the 
Cult, went to the wall while Cult giants and their frontmen and 
women grew financially fatter by the second. Mom and pop were 


denied an income and the right to earn a living and the wealth of 
people like Jeff Bezos (Amazon), Mark Zuckerberg (Facebook) and 
Sergei Brin and Larry Page (Google/Alphabet) have reached record 
levels. The Cult was increasing its own power through further 
dramatic concentrations of wealth while the competition was being 
destroyed and brought into a state of dependency. Lockdowns have 
been instigated to secure that very end and were never anything to 
do with health. My brother Paul spent 45 years building up a bus 
repair business, but lockdowns meant buses were running at a 
fraction of normal levels for months on end. Similar stories can told 
in their hundreds of millions worldwide. Efforts of a lifetime coldly 
destroyed by Cult multi-billionaires and their lackeys in government 
and law enforcement who continued to earn their living from the 
taxation of the people while denying the right of the same people to 
earn theirs. How different it would have been if those making and 
enforcing these decisions had to face the same financial hardships of 
those they affected, but they never do. 


Behind it all in the full knowledge of what he is doing and why is 
the psychopathic figure of Cult operative Bill Gates. His puppet 
Tedros at the World Health Organization declared ‘Covid’ a 
pandemic in March, 2020. The WHO had changed the definition of a 
‘pandemic’ in 2009 just a month before declaring the ‘swine flu 
pandemic’ which would not have been so under the previous 
definition. The same applies to ‘Covid’. The definition had 
included... ‘an infection by an infectious agent, occurring 
simultaneously in different countries, with a significant mortality 
rate relative to the proportion of the population infected’. The new 
definition removed the need for ‘significant mortality’. The 
‘pandemic’ has been fraudulent even down to the definition, but 
Gates demanded economy-destroying lockdowns, school closures, 
social distancing, mandatory masks, a ‘vaccination’ for every man, 
woman and child on the planet and severe consequences and 
restrictions for those that refused. Who gave him this power? The 


Cult did which he serves like a little boy in short trousers doing 
what his daddy tells him. He and his psychopathic missus even 
smiled when they said that much worse was to come (what they 
knew was planned to come). Gates responded in the matter-of-fact 
way of all psychopaths to a question about the effect on the world 
economy of what he was doing: 


Well, it won’t go to zero but it will shrink. Global GDP is probably going to take the biggest 
hit ever [Gates was smiling as he said this] ... in my lifetime this will be the greatest economic 
hit. But you don’t have a choice. People act as if you have a choice. People don’t feel like 
going to the stadium when they might get infected ... People are deeply affected by seeing 
these stats, by knowing they could be part of the transmission chain, old people, their parents 
and grandparents, could be affected by this, and so you don’t get to say ignore what is going 
on here. 


There will be the ability to open up, particularly in rich countries, if things are done well over 
the next few months, but for the world at large normalcy only returns when we have largely 
vaccinated the entire population. 


The man has no compassion or empathy. How could he when he’s 
a psychopath like all Cult players? My own view is that even beyond 
that he is very seriously mentally ill. Look in his eyes and you can 
see this along with his crazy flailing arms. You don’t do what he has 
done to the world population since the start of 2020 unless you are 
mentally ill and at the most extreme end of psychopathic. You 
especially don’t do it when to you know, as we shall see, that cases 
and deaths from ‘Covid’ are fakery and a product of monumental 
figure massaging. ‘These stats’ that Gates referred to are based on a 
‘test’ that’s not testing for the ‘virus’ as he has known all along. He 
made his fortune with big Cult support as an infamously ruthless 
software salesman and now buys global control of ‘health’ (death) 
policy without the population he affects having any say. It’s a 
breathtaking outrage. Gates talked about people being deeply 
affected by fear of ‘Covid’ when that was because of him and his 
global network lying to them minute-by-minute supported by a 
lying media that he seriously influences and funds to the tune of 
hundreds of millions. He’s handed big sums to media operations 
including the BBC, NBC, Al Jazeera, Univision, PBS NewsHour, 


ProPublica, National Journal, The Guardian, The Financial Times, The 
Atlantic, Texas Tribune, USA Today publisher Gannett, Washington 
Monthly, Le Monde, Center for Investigative Reporting, Pulitzer 
Center on Crisis Reporting, National Press Foundation, International 
Center for Journalists, Solutions Journalism Network, the Poynter 
Institute for Media Studies, and many more. Gates is everywhere in 
the ‘Covid’ hoax and the man must go to prison — or a mental facility 
— for the rest of his life and his money distributed to those he has 
taken such enormous psychopathic pleasure in crushing. 


The Muscle 

The Hunger Games global structure demands a police-military state 
— a fusion of the two into one force — which viciously imposes the 
will of the Cult on the population and protects the Cult from public 
rebellion. In that regard, too, the ‘Covid’ hoax just keeps on giving. 
Often unlawful, ridiculous and contradictory ‘Covid’ rules and 
regulations have been policed across the world by moronic 
automatons and psychopaths made faceless by face-nappy masks 
and acting like the Nazi SS and fascist blackshirts and brownshirts of 
Hitler and Mussolini. The smallest departure from the rules decreed 
by the psychos in government and their clueless gofers were jumped 
upon by the face-nappy fascists. Brutality against public protestors 
soon became commonplace even on girls, women and old people as 
the brave men with the batons — the Face-Nappies as I call them — 
broke up peaceful protests and handed out fines like confetti to 
people who couldn’t earn a living let alone pay hundreds of pounds 
for what was once an accepted human right. Robot Face-Nappies of 
Nottingham police in the English East Midlands fined one group 
£11,000 for attending a child’s birthday party. For decades I charted 
the transformation of law enforcement as genuine, decent officers 
were replaced with psychopaths and the brain dead who would 
happily and brutally do whatever their masters told them. Now they 
were let loose on the public and I would emphasise the point that 
none of this just happened. The step-by-step change in the dynamic 
between police and public was orchestrated from the shadows by 


those who knew where this was all going and the same with the 
perceptual reframing of those in all levels of authority and official 
administration through ‘training courses’ by organisations such as 
Common Purpose which was created in the late 1980s and given a 
massive boost in Blair era Britain until it became a global 
phenomenon. Supposed public ‘servants’ began to view the 
population as the enemy and the same was true of the police. This 
was the start of the explosion of behaviour manipulation 
organisations and networks preparing for the all-war on the human 
psyche unleashed with the dawn of 2020. I will go into more detail 
about this later in the book because it is a core part of what is 
happening. 

Police desecrated beauty spots to deter people gathering and 
arrested women for walking in the countryside alone ‘too far’ from 
their homes. We had arrogant, clueless sergeants in the Isle of Wight 
police where I live posting on Facebook what they insisted the 
population must do or else. A schoolmaster sergeant called Radford 
looked young enough for me to ask if his mother knew he was out, 
but he was posting what he expected people to do while a Sergeant 
Wilkinson boasted about fining lads for meeting in a McDonald’s car 
park where they went to get a lockdown takeaway. Wilkinson added 
that he had even cancelled their order. What a pair of prats these 
people are and yet they have increasingly become the norm among 
Jackboot Johnson’s Yellowshirts once known as the British police. 
This was the theme all over the world with police savagery common 
during lockdown protests in the United States, the Netherlands, and 
the fascist state of Victoria in Australia under its tyrannical and 
again moronic premier Daniel Andrews. Amazing how tyrannical 
and moronic tend to work as a team and the same combination 
could be seen across America as arrogant, narcissistic Woke 
governors and mayors such as Gavin Newsom (California), Andrew 
Cuomo (New York), Gretchen Whitmer (Michigan), Lori Lightfoot 
(Chicago) and Eric Garcetti (Los Angeles) did their Nazi and Stalin 
impressions with the full support of the compliant brutality of their 
enforcers in uniform as they arrested small business owners defying 


fascist shutdown orders and took them to jail in ankle shackles and 
handcuffs. This happened to bistro owner Marlena Pavlos-Hackney 
in Gretchen Whitmer’s fascist state of Michigan when police arrived 
to enforce an order by a state-owned judge for ‘putting the 
community at risk’ at a time when other states like Texas were 
dropping restrictions and migrants were pouring across the 
southern border without any ‘Covid’ questions at all. I’m sure there 
are many officers appalled by what they are ordered to do, but not 
nearly enough of them. If they were truly appalled they would not 
do it. As the months passed every opportunity was taken to have the 
military involved to make their presence on the streets ever more 
familiar and ‘normal’ for the longer-term goal of police-military 
fusion. 

Another crucial element to the Hunger Games enforcement 
network has been encouraging the public to report neighbours and 
others for ‘breaking the lockdown rules’. The group faced with 
£11,000 in fines at the child’s birthday party would have been 
dobbed-in by a neighbour with a brain the size of a pea. The 
technique was most famously employed by the Stasi secret police in 
communist East Germany who had public informants placed 
throughout the population. A police chief in the UK says his force 
doesn’t need to carry out ‘Covid’ patrols when they are flooded with 
so many calls from the public reporting other people for visiting the 
beach. Dorset police chief James Vaughan said people were so 
enthusiastic about snitching on their fellow humans they were now 
operating as an auxiliary arm of the police: ‘We are still getting 
around 400 reports a week from the public, so we will respond to 
reports ...We won't need to be doing hotspot patrols because people 
are very quick to pick the phone up and tell us.’ Vaughan didn’t say 
that this is a pillar of all tyrannies of whatever complexion and the 
means to hugely extend the reach of enforcement while spreading 
distrust among the people and making them wary of doing anything 
that might get them reported. Those narcissistic Isle of Wight 
sergeants Radford and Wilkinson never fail to add a link to their 
Facebook posts where the public can inform on their fellow slaves. 


Neither would be self-aware enough to realise they were imitating 
the Stasi which they might well never have heard of. Government 
psychologists that I will expose later laid out a policy to turn 
communities against each other in the same way. 


A coincidence? Yep, and | can knit fog 

I knew from the start of the alleged pandemic that this was a Cult 
operation. It presented limitless potential to rapidly advance the Cult 
agenda and exploit manipulated fear to demand that every man, 
woman and child on the planet was ‘vaccinated’ in a process never 
used on humans before which infuses self-replicating synthetic 
material into human cells. Remember the plan to transform the 
human body from a biological to a synthetic biological state. I’ll deal 
with the ‘vaccine’ (that’s not actually a vaccine) when I focus on the 
genetic agenda. Enough to say here that mass global ‘vaccination’ 
justified by this ‘new virus’ set alarms ringing after 30 years of 
tracking these people and their methods. The ‘Covid’ hoax officially 
beginning in China was also a big red flag for reasons I will be 
explaining. The agenda potential was so enormous that I could 
dismiss any idea that the ‘virus’ appeared naturally. Major 
happenings with major agenda implications never occur without 
Cult involvement in making them happen. My questions were 
twofold in early 2020 as the media began its campaign to induce 
global fear and hysteria: Was this alleged infectious agent released 
on purpose by the Cult or did it even exist at all? I then did what I 
always do in these situations. I sat, observed and waited to see 
where the evidence and information would take me. By March and 
early April synchronicity was strongly — and ever more so since then 
— pointing me in the direction of there is no ‘virus’. 1 went public on 
that with derision even from swathes of the alternative media that 
voiced a scenario that the Chinese government released the ‘virus’ in 
league with Deep State elements in the United States from a top- 
level bio-lab in Wuhan where the ‘virus’ is said to have first 
appeared. I looked at that possibility, but I didn’t buy it for several 
reasons. Deaths from the ‘virus’ did not in any way match what they 


would have been with a ‘deadly bioweapon’ and it is much more 
effective if you sell the illusion of an infectious agent rather than 
having a real one unless you can control through injection who has it 
and who doesn’t. Otherwise you lose control of events. A made-up 
‘virus’ gives you a blank sheet of paper on which you can make it do 
whatever you like and have any symptoms or mutant ‘variants’ you 
choose to add while a real infectious agent would limit you to what 
it actually does. A phantom disease allows you to have endless 
ludicrous ‘studies’ on the ‘Covid’ dollar to widen the perceived 
impact by inventing ever more ‘at risk’ groups including one study 
which said those who walk slowly may be almost four times more 
likely to die from the ‘virus’. People are in psychiatric wards for less. 


A real ‘deadly bioweapon’ can take out people in the hierarchy 
that are not part of the Cult, but essential to its operation. Obviously 
they don’t want that. Releasing a real disease means you 
immediately lose control of it. Releasing an illusory one means you 
don’t. Again it’s vital that people are extra careful when dealing with 
what they want to hear. A bioweapon unleashed from a Chinese 
laboratory in collusion with the American Deep State may fit a 
conspiracy narrative, but is it true? Would it not be far more effective 
to use the excuse of a ‘virus’ to justify the real bioweapon — the 
‘vaccine’? That way your disease agent does not have to be 
transmitted and arrives directly through a syringe. I saw a French 
virologist Luc Montagnier quoted in the alternative media as saying 
he had discovered that the alleged ‘new’ severe acute respiratory 
syndrome coronavirus , or SARS-CoV-2, was made artificially and 
included elements of the human immunodeficiency ‘virus’ (HIV) 
and a parasite that causes malaria. SARS-CoV-2 is alleged to trigger 
an alleged illness called Covid-19. I remembered Montagnier’s name 
from my research years before into claims that an HIV ‘retrovirus’ 
causes AIDs — claims that were demolished by Berkeley virologist 
Peter Duesberg who showed that no one had ever proved that HIV 
causes acquired immunodeficiency syndrome or AIDS. Claims that 
become accepted as fact, publicly and medically, with no proof 
whatsoever are an ever-recurring story that profoundly applies to 


‘Covid’. Nevertheless, despite the lack of proof, Montagnier’s team 
at the Pasteur Institute in Paris had a long dispute with American 
researcher Robert Gallo over which of them discovered and isolated 
the HIV ‘virus’ and with no evidence found it to cause AIDS. You will 
see later that there is also no evidence that any ‘virus’ causes any 
disease or that there is even such a thing as a ‘virus’ in the way it is 
said to exist. The claim to have ‘isolated’ the HIV ‘virus’ will be 
presented in its real context as we come to the shocking story — and 
it is a story — of SARS-CoV-2 and so will Montagnier’s assertion that 
he identified the full SARS-CoV-2 genome. 


Hoax in the making 

We can pick up the ‘Covid’ story in 2010 and the publication by the 
Rockefeller Foundation of a document called ‘Scenarios for the 
Future of Technology and International Development’. The inner 
circle of the Rockefeller family has been serving the Cult since John 
D. Rockefeller (1839-1937) made his fortune with Standard Oil. It is 
less well known that the same Rockefeller — the Bill Gates of his day 
— was responsible for establishing what is now referred to as ‘Big 
Pharma’, the global network of pharmaceutical companies that make 
outrageous profits dispensing scalpel and drug ‘medicine’ and are 
obsessed with pumping vaccines in ever-increasing number into as 
many human arms and backsides as possible. John D. Rockefeller 
was the driving force behind the creation of the ‘education’ system 
in the United States and elsewhere specifically designed to program 
the perceptions of generations thereafter. The Rockefeller family 
donated exceptionally valuable land in New York for the United 
Nations building and were central in establishing the World Health 
Organization in 1948 as an agency of the UN which was created 
from the start as a Trojan horse and stalking horse for world 
government. Now enter Bill Gates. His family and the Rockefellers 
have long been extremely close and I have seen genealogy which 
claims that if you go back far enough the two families fuse into the 
same bloodline. Gates has said that the Bill and Melinda Gates 
Foundation was inspired by the Rockefeller Foundation and why not 


when both are serving the same Cult? Major tax-exempt foundations 
are overwhelmingly criminal enterprises in which Cult assets fund 
the Cult agenda in the guise of ‘philanthropy’ while avoiding tax in 
the process. Cult operatives can become mega-rich in their role of 
front men and women for the psychopaths at the inner core and 
they, too, have to be psychopaths to knowingly serve such evil. Part 
of the deal is that a big percentage of the wealth gleaned from 
representing the Cult has to be spent advancing the ambitions of the 
Cult and hence you have the Rockefeller Foundation, Bill and 
Melinda Gates Foundation (and so many more) and people like 
George Soros with his global Open Society Foundations spending 
their billions in pursuit of global Cult control. Gates is a global 
public face of the Cult with his interventions in world affairs 
including Big Tech influence; a central role in the ‘Covid’ and 
‘vaccine’ scam; promotion of the climate change shakedown; 
manipulation of education; geoengineering of the skies; and his 
food-control agenda as the biggest owner of farmland in America, 
his GMO promotion and through other means. As one writer said: 
‘Gates monopolizes or wields disproportionate influence over the 
tech industry, global health and vaccines, agriculture and food policy 
(including biopiracy and fake food), weather modification and other 
climate technologies, surveillance, education and media.’ The almost 
limitless wealth secured through Microsoft and other not-allowed- 
to-fail ventures (including vaccines) has been ploughed into a long, 
long list of Cult projects designed to enslave the entire human race. 
Gates and the Rockefellers have been working as one unit with the 
Rockefeller-established World Health Organization leading global 
‘Covid’ policy controlled by Gates through his mouth-piece Tedros. 
Gates became the WHO’s biggest funder when Trump announced 
that the American government would cease its donations, but Biden 
immediately said he would restore the money when he took office in 
January, 2021. The Gates Foundation (the Cult) owns through 
limitless funding the world health system and the major players 
across the globe in the ‘Covid’ hoax. 


Okay, with that background we return to that Rockefeller 
Foundation document of 2010 headed ‘Scenarios for the Future of 
Technology and International Development’ and its ‘imaginary’ 
epidemic of a virulent and deadly influenza strain which infected 20 
percent of the global population and killed eight million in seven 
months. The Rockefeller scenario was that the epidemic destroyed 
economies, closed shops, offices and other businesses and led to 
governments imposing fierce rules and restrictions that included 
mandatory wearing of face masks and body-temperature checks to 
enter communal spaces like railway stations and supermarkets. The 
document predicted that even after the height of the Rockefeller- 
envisaged epidemic the authoritarian rule would continue to deal 
with further pandemics, transnational terrorism, environmental 
crises and rising poverty. Now you may think that the Rockefellers 
are our modern-day seers or alternatively, and rather more likely, 
that they well knew what was planned a few years further on. 
Fascism had to be imposed, you see, to ‘protect citizens from risk 
and exposure’. The Rockefeller scenario document said: 


During the pandemic, national leaders around the world flexed their authority and imposed 
airtight rules and restrictions, from the mandatory wearing of face masks to body-temperature 
checks at the entries to communal spaces like train stations and supermarkets. Even after the 
pandemic faded, this more authoritarian control and oversight of citizens and their activities 
stuck and even intensified. In order to protect themselves from the spread of increasingly 
global problems — from pandemics and transnational terrorism to environmental crises and 
rising poverty — leaders around the world took a firmer grip on power. 


At first, the notion of a more controlled world gained wide acceptance and approval. Citizens 
willingly gave up some of their sovereignty — and their privacy — to more paternalistic states in 
exchange for greater safety and stability. Citizens were more tolerant, and even eager, for top- 
down direction and oversight, and national leaders had more latitude to impose order in the 
ways they saw fit. 


In developed countries, this heightened oversight took many forms: biometric IDs for all 
citizens, for example, and tighter regulation of key industries whose stability was deemed vital 
to national interests. In many developed countries, enforced cooperation with a suite of new 
regulations and agreements slowly but steadily restored both order and, importantly, 
economic growth. 


There we have the prophetic Rockefellers in 2010 and three years 
later came their paper for the Global Health Summit in Beijing, 
China, when government representatives, the private sector, 
international organisations and groups met to discuss the next 100 
years of ‘global health’. The Rockefeller Foundation-funded paper 
was called ‘Dreaming the Future of Health for the Next 100 Years 
and more prophecy ensued as it described a dystopian future: ‘The 
abundance of data, digitally tracking and linking people may mean 
the ‘death of privacy’ and may replace physical interaction with 
transient, virtual connection, generating isolation and raising 
questions of how values are shaped in virtual networks.’ Next in the 
‘Covid’ hoax preparation sequence came a ‘table top’ simulation in 
2018 for another ‘imaginary’ pandemic of a disease called Clade X 
which was said to kill 900 million people. The exercise was 
organised by the Gates-funded Johns Hopkins University’s Center 
for Health Security in the United States and this is the very same 
university that has been compiling the disgustingly and 
systematically erroneous global figures for ‘Covid’ cases and deaths. 
Similar Johns Hopkins health crisis scenarios have included the Dark 
Winter exercise in 2001 and Atlantic Storm in 2005. 


Nostradamus 201 

For sheer predictive genius look no further prophecy-watchers than 
the Bill Gates-funded Event 201 held only six weeks before the 
‘coronavirus pandemic’ is supposed to have broken out in China 
and Event 201 was based on a scenario of a global ‘coronavirus 
pandemic’. Melinda Gates, the great man’s missus, told the BBC that 
he had ‘prepared for years’ for a coronavirus pandemic which told 
us what we already knew. Nostradamugates had predicted in a TED 
talk in 2015 that a pandemic was coming that would kill a lot of 
people and demolish the world economy. My god, the man is a 
machine — possibly even literally. Now here he was only weeks 
before the real thing funding just such a simulated scenario and 
involving his friends and associates at Johns Hopkins, the World 
Economic Forum Cult-front of Klaus Schwab, the United Nations, 


Johnson & Johnson, major banks, and officials from China and the 
Centers for Disease Control in the United States. What synchronicity 
— Johns Hopkins would go on to compile the fraudulent ‘Covid’ 
figures, the World Economic Forum and Schwab would push the 
‘Great Reset’ in response to ‘Covid’, the Centers for Disease Control 
would be at the forefront of “Covid’ policy in the United States, 
Johnson & Johnson would produce a ‘Covid vaccine’, and 
everything would officially start just weeks later in China. Spooky, 
eh? They were even accurate in creating a simulation of a ‘virus’ 
pandemic because the ‘real thing’ would also be a simulation. Event 
201 was not an exercise preparing for something that might happen; 
it was a rehearsal for what those in control knew was going to 
happen and very shortly. Hours of this simulation were posted on 
the Internet and the various themes and responses mirrored what 
would soon be imposed to transform human society. News stories 
were inserted and what they said would be commonplace a few 
weeks later with still more prophecy perfection. Much discussion 
focused on the need to deal with misinformation and the ‘anti-vax 
movement’ which is exactly what happened when the ‘virus’ arrived 
— was Said to have arrived — in the West. 

Cult-owned social media banned criticism and exposure of the 
official ‘virus’ narrative and when I said there was no ‘virus’ in early 
April, 2020, I was banned by one platform after another including 
YouTube, Facebook and later Twitter. The mainstream broadcast 
media in Britain was in effect banned from interviewing me by the 
Tony-Blair-created government broadcasting censor Ofcom headed 
by career government bureaucrat Melanie Dawes who was 
appointed just as the ‘virus’ hoax was about to play out in January, 
2020. At the same time the Ickonic media platform was using Vimeo, 
another ultra-Zionist-owned operation, while our own player was 
being created and they deleted in an instant hundreds of videos, 
documentaries, series and shows to confirm their unbelievable 
vindictiveness. We had copies, of course, and they had to be restored 
one by one when our player was ready. These people have no class. 
Sabbatian Facebook promised free advertisements for the Gates- 


controlled World Health Organization narrative while deleting ‘false 
claims and conspiracy theories’ to stop ‘misinformation’ about the 
alleged coronavirus. All these responses could be seen just a short 
while earlier in the scenarios of Event 201. Extreme censorship was 
absolutely crucial for the Cult because the official story was so 
ridiculous and unsupportable by the evidence that it could never 
survive open debate and the free-flow of information and opinion. If 
you can’t win a debate then don’t have one is the Cult’s approach 
throughout history. Facebook’s little boy front man — front boy — 
Mark Zuckerberg equated ‘credible and accurate information’ with 
official sources and exposing their lies with ‘misinformation’. 


Silencing those that can see 

The censorship dynamic of Event 201 is now the norm with an army 
of narrative-supporting ‘fact-checker’ organisations whose entire 
reason for being is to tell the public that official narratives are true 
and those exposing them are lying. One of the most appalling of 
these ‘fact-checkers’ is called NewsGuard founded by ultra-Zionist 
Americans Gordon Crovitz and Steven Brill. Crovitz is a former 
publisher of The Wall Street Journal, former Executive Vice President 
of Dow Jones, a member of the Council on Foreign Relations (CFR), 
and on the board of the American Association of Rhodes Scholars. 
The CFR and Rhodes Scholarships, named after Rothschild agent 
Cecil Rhodes who plundered the gold and diamonds of South Africa 
for his masters and the Cult, have featured widely in my books. 
NewsGuard don’t seem to like me for some reason — I really can’t 
think why — and they have done all they can to have me censored 
and discredited which is, to quote an old British politician, like being 
savaged by a dead sheep. They are, however, like all in the 
censorship network, very well connected and funded by 
organisations themselves funded by, or connected to, Bill Gates. As 
you would expect with anything associated with Gates NewsGuard 
has an offshoot called HealthGuard which ‘fights online health care 
hoaxes’. How very kind. Somehow the NewsGuard European 
Managing Director Anna-Sophie Harling, a remarkably young- 


looking woman with no broadcasting experience and little hands-on 
work in journalism, has somehow secured a position on the ‘Content 
Board’ of UK government broadcast censor Ofcom. An executive of 
an organisation seeking to discredit dissidents of the official 
narratives is making decisions for the government broadcast 
‘regulator’ about content?? Another appalling ‘fact-checker’ is Full 
Fact funded by George Soros and global censors Google and 
Facebook. 


It’s amazing how many activists in the ‘fact-checking’, ‘anti-hate’, 
arena turn up in government-related positions — people like UK 
Labour Party activist Imran Ahmed who heads the Center for 
Countering Digital Hate founded by people like Morgan 
McSweeney, now chief of staff to the Labour Party’s hapless and 
useless ‘leader’ Keir Starmer. Digital Hate — which is what it really is 
— uses the American spelling of Center to betray its connection to a 
transatlantic network of similar organisations which in 2020 
shapeshifted from attacking people for ‘hate’ to attacking them for 
questioning the ‘Covid’ hoax and the dangers of the ‘Covid vaccine’. 
It’s just a coincidence, you understand. This is one of Imran Ahmed’s 
hysterical statements: ‘I would go beyond calling anti-vaxxers 
conspiracy theorists to say they are an extremist group that pose a 
national security risk.’ No one could ever accuse this prat of 
understatement and he’s including in that those parents who are 
now against vaccines after their children were damaged for life or 
killed by them. He’s such a nice man. Ahmed does the rounds of the 
Woke media getting soft-ball questions from spineless ‘journalists’ 
who never ask what right he has to campaign to destroy the freedom 
of speech of others while he demands it for himself. There also 
seems to be an overrepresentation in Ofcom of people connected to 
the narrative-worshipping BBC. This incredible global network of 
narrative-support was super-vital when the ‘Covid’ hoax was played 
in the light of the mega-whopper lies that have to be defended from 
the spotlight cast by the most basic intelligence. 


The Cult plays the long game and proceeds step-by-step ensuring 
that everything is in place before major cards are played and they 
don’t come any bigger than the ‘Covid’ hoax. The psychopaths can’t 
handle events where the outcome isn’t certain and as little as 
possible — preferably nothing — is left to chance. Politicians, 
government and medical officials who would follow direction were 
brought to illusory power in advance by the Cult web whether on 
the national stage or others like state governors and mayors of 
America. For decades the dynamic between officialdom, law 
enforcement and the public was changed from one of service to one 
of control and dictatorship. Behaviour manipulation networks 
established within government were waiting to impose the coming 
‘Covid’ rules and regulations specifically designed to subdue and 
rewire the psyche of the people in the guise of protecting health. 
These included in the UK the Behavioural Insights Team part-owned 
by the British government Cabinet Office; the Scientific Pandemic 
Insights Group on Behaviours (SPI-B); and a whole web of 
intelligence and military groups seeking to direct the conversation 
on social media and control the narrative. Among them are the 
cyberwarfare (on the people) 77th Brigade of the British military 
which is also coordinated through the Cabinet Office as civilian and 
military leadership continues to combine in what they call the 
Fusion Doctrine. The 77th Brigade is a British equivalent of the 
infamous Israeli (Sabbatian) military cyberwarfare and Internet 
manipulation operation Unit 8200 which I expose at length in The 
Trigger. Also carefully in place were the medical and science advisers 
to government — many on the payroll past or present of Bill Gates — 
and a whole alternative structure of unelected government stood by 
to take control when elected parliaments were effectively closed 
down once the ‘Covid’ card was slammed on the table. The structure 
I have described here and so much more was installed in every 
major country through the Cult networks. The top-down control 
hierarchy looks like this: The Cult — Cult-owned Gates — the World 
Health Organization and Tedros — Gates-funded or controlled chief 
medical officers and science ‘advisers’ (dictators) in each country — 


political ‘leaders’— law enforcement — The People. Through this 
simple global communication and enforcement structure the policy 
of the Cult could be imposed on virtually the entire human 
population so long as they acquiesced to the fascism. With 
everything in place it was time for the button to be pressed in late 
2019/early 2020. 


These were the prime goals the Cult had to secure for its will to 
prevail: 


1) Locking down economies, closing all but designated ‘essential’ businesses (Cult-owned 
corporations were ‘essential’), and putting the population under house arrest was an 
imperative to destroy independent income and employment and ensure dependency on the 
Cult-controlled state in the Hunger Games Society. Lockdowns had to be established as the 
global blueprint from the start to respond to the ‘virus’ and followed by pretty much the 
entire world. 


2) The global population had to be terrified into believing in a deadly ‘virus’ that didn’t 
actually exist so they would unquestioningly obey authority in the belief that authority 
must know how best to protect them and their families. Software salesman Gates would 
suddenly morph into the world’s health expert and be promoted as such by the Cult-owned 
media. 


3) A method of testing that wasn’t testing for the ‘virus’, but was only claimed to be, had to 
be in place to provide the illusion of ‘cases’ and subsequent ‘deaths’ that had a very 
different cause to the ‘Covid-19’ that would be scribbled on the death certificate. 


4) Because there was no ‘virus’ and the great majority testing positive with a test not testing 
for the ‘virus’ would have no symptoms of anything the lie had to be sold that people 
without symptoms (without the ‘virus’) could still pass it on to others. This was crucial to 
justify for the first time quarantining — house arresting — healthy people. Without this the 
economy-destroying lockdown of everybody could not have been credibly sold. 


5) The ‘saviour’ had to be seen as a vaccine which beyond evil drug companies were 
working like angels of mercy to develop as quickly as possible, with all corners cut, to save 
the day. The public must absolutely not know that the ‘vaccine’ had nothing to do with a 
‘virus’ or that the contents were ready and waiting with a very different motive long before 
the ‘Covid’ card was even lifted from the pack. 


I said in March, 2020, that the ‘vaccine’ would have been created 
way ahead of the ‘Covid’ hoax which justified its use and the 
following December an article in the New York Intelligencer 
magazine said the Moderna ‘vaccine’ had been ‘designed’ by 


January, 2020. This was ‘before China had even acknowledged that 
the disease could be transmitted from human to human, more than a 
week before the first confirmed coronavirus case in the United 
States’. The article said that by the time the first American death was 
announced a month later ‘the vaccine had already been 
manufactured and shipped to the National Institutes of Health for 
the beginning of its Phase I clinical trial’. The ‘vaccine’ was actually 
‘designed’ long before that although even with this timescale you 
would expect the article to ask how on earth it could have been done 
that quickly. Instead it asked why the ‘vaccine’ had not been rolled 
out then and not months later. Journalism in the mainstream is truly 
dead. I am going to detail in the next chapter why the ‘virus’ has 
never existed and how a hoax on that scale was possible, but first the 
foundation on which the Big Lie of ‘Covid’ was built. 


The test that doesn't test 


Fraudulent ‘testing’ is the bottom line of the whole ‘Covid’ hoax and 
was the means by which a ‘virus’ that did not exist appeared to exist. 
They could only achieve this magic trick by using a test not testing 
for the ‘virus’. To use a test that was testing for the ‘virus’ would 
mean that every test would come back negative given there was no 
‘virus’. They chose to exploit something called the RT-PCR test 
invented by American biochemist Kary Mullis in the 1980s who said 
publicly that his PCR test ... cannot detect infectious disease. Yes, the 
‘test’ used worldwide to detect infectious ‘Covid’ to produce all the 
illusory ‘cases’ and ‘deaths’ compiled by Johns Hopkins and others 
cannot detect infectious disease. This fact came from the mouth of the 
man who invented PCR and was awarded the Nobel Prize in 
Chemistry in 1993 for doing so. Sadly, and incredibly conveniently 
for the Cult, Mullis died in August, 2019, at the age of 74 just before 
his test would be fraudulently used to unleash fascism on the world. 
He was said to have died from pneumonia which was an irony in 
itself. A few months later he would have had ‘Covid-19’ on his death 
certificate. I say the timing of his death was convenient because had 
he lived Mullis, a brilliant, honest and decent man, would have been 


vociferously speaking out against the use of his test to detect “Covid’ 
when it was never designed, or able, to do that. I know that to be 
true given that Mullis made the same point when his test was used 
to ‘detect’ — not detect — HIV. He had been seriously critical of the 
Gallo/Montagnier claim to have isolated the HIV ‘virus’ and shown 
it to cause AIDS for which Mullis said there was no evidence. AIDS 
is actually not a disease but a series of diseases from which people 
die all the time. When they die from those same diseases after a 
positive ‘test’ for HIV then AIDS goes on their death certificate. I 
think I’ve heard that before somewhere. Countries instigated a 
policy with ‘Covid’ that anyone who tested positive with a test not 
testing for the ‘virus’ and died of any other cause within 28 days and 
even longer ‘Covid-19 had to go on the death certificate. Cases have 
come from the test that can’t test for infectious disease and the 
deaths are those who have died of anything after testing positive 
with a test not testing for the ‘virus’. I’Il have much more later about 
the death certificate scandal. 


Mullis was deeply dismissive of the now US ‘Covid’ star Anthony 
Fauci who he said was a liar who didn’t know anything about 
anything — ‘and I would say that to his face — nothing.’ He said of 
Fauci: ‘The man thinks he can take a blood sample, put it in an 
electron microscope and if it’s got a virus in there you'll know it — he 
doesn’t understand electron microscopy and he doesn’t understand 
medicine and shouldn’t be in a position like he’s in.’ That position, 
terrifyingly, has made him the decider of “Covid’ fascism policy on 
behalf of the Cult in his role as director since 1984 of the National 
Institute of Allergy and Infectious Diseases (NIAID) while his record 
of being wrong is laughable; but being wrong, so long as it’s the right 
kind of wrong, is why the Cult loves him. He’ll say anything the Cult 
tells him to say. Fauci was made Chief Medical Adviser to the 
President immediately Biden took office. Biden was installed in the 
White House by Cult manipulation and one of his first decisions was 
to elevate Fauci to a position of even more control. This is a 
coincidence? Yes, and I identify as a flamenco dancer called Lola. 
How does such an incompetent criminal like Fauci remain in that 


pivotal position in American health since the 1980s? When you serve 
the Cult it looks after you until you are surplus to requirements. 
Kary Mullis said prophetically of Fauci and his like: “Those guys 
have an agenda and it’s not an agenda we would like them to have 
... they make their own rules, they change them when they want to, 
and Tony Fauci does not mind going on television in front of the 
people who pay his salary and lie directly into the camera.’ Fauci has 
done that almost daily since the ‘Covid’ hoax began. Lying is in 
Fauci’s DNA. To make the situation crystal clear about the PCR test 
this is a direct quote from its inventor Kary Mullis: 


It [the PCR test] doesn’t tell you that you’re sick and doesn’t tell you that the thing you ended 
up with was really going to hurt you ...’ 


Ask yourself why governments and medical systems the world over 
have been using this very test to decide who is ‘infected’ with the 
SARS-CoV-2 ‘virus’ and the alleged disease it allegedly causes, 
‘Covid-19’. The answer to that question will tell you what has been 
going on. By the way, here’s a little show-stopper — the ‘new’ SARS- 
CoV-2 ‘virus’ was ‘identified’ as such right from the start using ... the 
PCR test not testing for the ‘virus’. If you are new to this and find that 
shocking then stick around. I have hardly started yet. Even worse, 
other ‘tests’, like the ‘Lateral Flow Device’ (LFD), are considered so 
useless that they have to be confirmed by the PCR test! Leaked emails 
written by Ben Dyson, adviser to UK ‘Health’ Secretary Matt 
Hancock, said they were ‘dangerously unreliable’. Dyson, executive 
director of strategy at the Department of Health, wrote: ‘As of today, 
someone who gets a positive LFD result in (say) London has at best a 
25 per cent chance of it being a true positive, but if it is a self- 
reported test potentially as low as 10 per cent (on an optimistic 
assumption about specificity) or as low as 2 per cent (on a more 
pessimistic assumption).’ These are the ‘tests’ that schoolchildren 
and the public are being urged to have twice a week or more and 
have to isolate if they get a positive. Each fake positive goes in the 
statistics as a ‘case’ no matter how ludicrously inaccurate and the 


‘cases’ drive lockdown, masks and the pressure to ‘vaccinate’. The 
government said in response to the email leak that the ‘tests’ were 
accurate which confirmed yet again what shocking bloody liars they 
are. The real false positive rate is 100 percent as we’ll see. In another 
‘you couldn’t make it up’ the UK government agreed to pay £2.8 
billion to California’s Innova Medical Group to supply the irrelevant 
lateral flow tests. The company’s primary test-making centre is in 
China. Innova Medical Group, established in March, 2020, is owned 
by Pasaca Capital Inc, chaired by Chinese-American millionaire 
Charles Huang who was born in Wuhan. 


How it works — and how it doesn't 

The RT-PCR test, known by its full title of Polymerase chain reaction, 
is used across the world to make millions, even billions, of copies of 
a DNA/RNA genetic information sample. The process is called 
‘amplification’ and means that a tiny sample of genetic material is 
amplified to bring out the detailed content. I stress that it is not 
testing for an infectious disease. It is simply amplifying a sample of 
genetic material. In the words of Kary Mullis: ‘PCR is ... just a 
process that’s used to make a whole lot of something out of 
something.’ To emphasise the point companies that make the PCR 
tests circulated around the world to ‘test’ for ‘Covid’ warn on the 
box that it can’t be used to detect ‘Covid’ or infectious disease and is 
for research purposes only. It’s okay, rest for a minute and you'll be 
fine. This is the test that produces the ‘cases’ and ‘deaths’ that have 
been used to destroy human society. All those global and national 
medical and scientific ‘experts’ demanding this destruction to ‘save 
us’ KNOW that the test is not testing for the ‘virus’ and the cases and 
deaths they claim to be real are an almost unimaginable fraud. Every 
one of them and so many others including politicians and 
psychopaths like Gates and Tedros must be brought before 
Nuremburg-type trials and jailed for the rest of their lives. The more 
the genetic sample is amplified by PCR the more elements of that 
material become sensitive to the test and by that I don’t mean 
sensitive for a ‘virus’ but for elements of the genetic material which 


is naturally in the body or relates to remnants of old conditions of 
various kinds lying dormant and causing no disease. Once the 
amplification of the PCR reaches a certain level everyone will test 
positive. So much of the material has been made sensitive to the test 
that everyone will have some part of it in their body. Even lying 
criminals like Fauci have said that once PCR amplifications pass 35 
cycles everything will be a false positive that cannot be trusted for 
the reasons I have described. I say, like many proper doctors and 
scientists, that 100 percent of the ‘positives’ are false, but let’s just go 
with Fauci for a moment. 


He says that any amplification over 35 cycles will produce false 
positives and yet the US Centers for Disease Control (CDC) and 
Food and Drug Administration (FDA) have recommended up to 40 
cycles and the National Health Service (NHS) in Britain admitted in 
an internal document for staff that it was using 45 cycles of 
amplification. A long list of other countries has been doing the same 
and at least one ‘testing’ laboratory has been using 50 cycles. Have 
you ever heard a doctor, medical ‘expert’ or the media ask what level 
of amplification has been used to claim a ‘positive’. The ‘test’ comes 
back ‘positive’ and so you have the ‘virus’, end of story. Now we can 
see how the government in Tanzania could send off samples from a 
goat and a pawpaw fruit under human names and both came back 
positive for ‘Covid-19’. Tanzania president John Magufuli mocked 
the ‘Covid’ hysteria, the PCR test and masks and refused to import 
the DNA-manipulating ‘vaccine’. The Cult hated him and an article 
sponsored by the Bill Gates Foundation appeared in the London 
Guardian in February, 2021, headed ‘It’s time for Africa to rein in 
Tanzania’s anti-vaxxer president’. Well, ‘reined in’ he shortly was. 
Magufuli appeared in good health, but then, in March, 2021, he was 
dead at 61 from ‘heart failure’. He was replaced by Samia Hassan 
Suhulu who is connected to Klaus Schwab’s World Economic Forum 
and she immediately reversed Magufuli’s “‘Covid’ policy. A sample of 
cola tested positive for ‘Covid’ with the PCR test in Germany while 
American actress and singer-songwriter Erykah Badu tested positive 
in one nostril and negative in the other. Footballer Ronaldo called 


the PCR test ‘bullshit’ after testing positive three times and being 
forced to quarantine and miss matches when there was nothing 
wrong with him. The mantra from Tedros at the World Health 
Organization and national governments (same thing) has been test, 
test, test. They know that the more tests they can generate the more 
fake ‘cases’ they have which go on to become ‘deaths’ in ways Iam 
coming to. The UK government has its Operation Moonshot planned 
to test multiple millions every day in workplaces and schools with 
free tests for everyone to use twice a week at home in line with the 
Cult plan from the start to make testing part of life. A government 
advertisement for an ‘Interim Head of Asymptomatic Testing 
Communication’ said the job included responsibility for delivering a 
‘communications strategy’ (propaganda) ‘to support the expansion 
of asymptomatic testing that ‘normalises testing as part of everyday life’. 
More tests means more fake ‘cases’, ‘deaths’ and fascism. I have 
heard of, and from, many people who booked a test, couldn’t turn 
up, and yet got a positive result through the post for a test they’d 
never even had. The whole thing is crazy, but for the Cult there’s 
method in the madness. Controlling and manipulating the level of 
amplification of the test means the authorities can control whenever 
they want the number of apparent ‘cases’ and ‘deaths’. If they want 
to justify more fascist lockdown and destruction of livelihoods they 
keep the amplification high. If they want to give the illusion that 
lockdowns and the ‘vaccine’ are working then they lower the 
amplification and ‘cases’ and ‘deaths’ will appear to fall. In January, 
2021, the Cult-owned World Health Organization suddenly warned 
laboratories about over-amplification of the test and to lower the 
threshold. Suddenly headlines began appearing such as: ‘Why ARE 
“Covid” cases plummeting?’ This was just when the vaccine rollout 
was underway and I had predicted months before they would make 
cases appear to fall through amplification tampering when the 
‘vaccine’ came. These people are so predictable. 


The question must be asked of what is on the test swabs being poked 
far up the nose of the population to the base of the brain? A nasal 
swab punctured one woman’s brain and caused it to leak fluid. Most 
of these procedures are being done by people with little training or 
medical knowledge. Dr Lorraine Day, former orthopaedic trauma 
surgeon and Chief of Orthopaedic Surgery at San Francisco General 
Hospital, says the tests are really a ‘vaccine’. Cows have long been 
vaccinated this way. She points out that masks have to cover the nose 
and the mouth where it is claimed the ‘virus’ exists in saliva. Why 
then don’t they take saliva from the mouth as they do with a DNA 
test instead of pushing a long swab up the nose towards the brain? 
The ethmoid bone separates the nasal cavity from the brain and 
within that bone is the cribriform plate. Dr Day says that when the 
swab is pushed up against this plate and twisted the procedure is 
‘depositing things back there’. She claims that among these ‘things’ 
are nanoparticles that can enter the brain. Researchers have noted 
that a team at the Gates-funded Johns Hopkins have designed tiny, 
star-shaped micro-devices that can latch onto intestinal mucosa and 
release drugs into the body. Mucosa is the thin skin that covers the 
inside surface of parts of the body such as the nose and mouth and 
produces mucus to protect them. The Johns Hopkins micro-devices 
are called ‘theragrippers’ and were ‘inspired’ by a parasitic worm 
that digs its sharp teeth into a host’s intestines. Nasal swabs are also 
coated in the sterilisation agent ethylene oxide. The US National 
Cancer Institute posts this explanation on its website: 


At room temperature, ethylene oxide is a flammable colorless gas with a sweet odor. It is used 
primarily to produce other chemicals, including antifreeze. In smaller amounts, ethylene 
oxide is used as a pesticide and a sterilizing agent. The ability of ethylene oxide to damage 
DNA makes it an effective sterilizing agent but also accounts for its cancer-causing activity. 


The Institute mentions lymphoma and leukaemia as cancers most 
frequently reported to be associated with occupational exposure to 
ethylene oxide along with stomach and breast cancers. How does 
anyone think this is going to work out with the constant testing 


regime being inflicted on adults and children at home and at school 
that will accumulate in the body anything that’s on the swab? 


Doctors know best 

It is vital for people to realise that ‘hero’ doctors ‘know’ only what 
the Big Pharma-dominated medical authorities tell them to ‘know’ 
and if they refuse to ‘know’ what they are told to ‘know’ they are out 
the door. They are mostly not physicians or healers, but repeaters of 
the official narrative — or else. I have seen alleged professional 
doctors on British television make shocking statements that we are 
supposed to take seriously. One called ‘Dr’ Amir Khan, who is 
actually telling patients how to respond to illness, said that men 
could take the birth pill to ‘help slow down the effects of Covid-19”. 
In March, 2021, another ridiculous “Covid study’ by an American 
doctor proposed injecting men with the female sex hormone 
progesterone as a ‘Covid’ treatment. British doctor Nighat Arif told 
the BBC that face coverings were now going to be part of ongoing 
normal. Yes, the vaccine protects you, she said (evidence?) ... but the 
way to deal with viruses in the community was always going to 
come down to hand washing, face covering and keeping a physical 
distance. That’s not what we were told before the ‘vaccine’ was 
circulating. Arif said she couldn't imagine ever again going on the 
underground or in a lift without a mask. I was just thanking my 
good luck that she was not my doctor when she said — in March, 
2021 — that if “we are behaving and we are doing all the right things’ 
she thought we could ‘have our nearest and dearest around us at 
home ... around Christmas and New Year! Her patronising delivery 
was the usual school teacher talking to six-year-olds as she repeated 
every government talking point and probably believed them all. If 
we have learned anything from the ‘Covid’ experience surely it must 
be that humanity’s perception of doctors needs a fundamental 
rethink. NHS ‘doctor’ Sara Kayat told her television audience that 
the ‘Covid vaccine’ would ‘100 percent prevent hospitalisation and 
death’. Not even Big Pharma claimed that. We have to stop taking 
‘experts’ at their word without question when so many of them are 


clueless and only repeating the party line on which their careers 
depend. That is not to say there are not brilliants doctors — there are 
and I have spoken to many of them since all this began — but you 
won't see them in the mainstream media or quoted by the 
psychopaths and yes-people in government. 


Remember the name — Christian Drosten 

German virologist Christian Drosten, Director of Charité Institute of 
Virology in Berlin, became a national star after the pandemic hoax 
began. He was feted on television and advised the German 
government on ‘Covid’ policy. Most importantly to the wider world 
Drosten led a group that produced the ‘Covid’ testing protocol for 
the PCR test. What a remarkable feat given the PCR cannot test for 
infectious disease and even more so when you think that Drosten 
said that his method of testing for SARS-CoV-2 was developed 
‘without having virus material available’. He developed a test for a 
‘virus’ that he didn’t have and had never seen. Let that sink in as you 
survey the global devastation that came from what he did. The 
whole catastrophe of Drosten’s ‘test’ was based on the alleged 
genetic sequence published by Chinese scientists on the Internet. We 
will see in the next chapter that this alleged ‘genetic sequence’ has 
never been produced by China or anyone and cannot be when there 
is no SARS-CoV-2. Drosten, however, doesn’t seem to let little details 
like that get in the way. He was the lead author with Victor Corman 
from the same Charité Hospital of the paper ‘Detection of 2019 novel 
coronavirus (2019-nCoV) by real-time PCR’ published in a magazine 
called Eurosurveillance. This became known as the Corman-Drosten 
paper. In November, 2020, with human society devastated by the 
effects of the Corman-Drosten test baloney, the protocol was publicly 
challenged by 22 international scientists and independent 
researchers from Europe, the United States, and Japan. Among them 
were senior molecular geneticists, biochemists, immunologists, and 
microbiologists. They produced a document headed ‘External peer 
review of the RTPCR test to detect SARS-Cov-2 Reveals 10 Major 
Flaws At The Molecular and Methodological Level: Consequences 


For False-Positive Results’. The flaws in the Corman-Drosten test 
included the following: 


e The test is non-specific because of erroneous design 
e Results are enormously variable 


e The test is unable to discriminate between the whole ‘virus’ and 
viral fragments 


e It doesn’t have positive or negative controls 
e The test lacks a standard operating procedure 
e It is unsupported by proper peer view 


The scientists said the PCR ‘Covid’ testing protocol was not 
founded on science and they demanded the Corman-Drosten paper 
be retracted by Eurosurveillance. They said all present and previous 
Covid deaths, cases, and ‘infection rates’ should be subject to a 
massive retroactive inquiry. Lockdowns and travel restrictions 
should be reviewed and relaxed and those diagnosed through PCR 
to have ‘Covid-19’ should not be forced to isolate. Dr Kevin Corbett, 
a health researcher and nurse educator with a long academic career 
producing a stream of peer-reviewed publications at many UK 
universities, made the same point about the PCR test debacle. He 
said of the scientists’ conclusions: ‘Every scientific rationale for the 
development of that test has been totally destroyed by this paper. It’s 
like Hiroshima/Nagasaki to the Covid test.’ He said that China 
hadn’t given them an isolated ‘virus’ when Drosten developed the 
test. Instead they had developed the test from a sequence in a gene 
bank.’ Put another way ... they made it up! The scientists were 
supported in this contention by a Portuguese appeals court which 
ruled in November, 2020, that PCR tests are unreliable and it is 
unlawful to quarantine people based solely on a PCR test. The point 
about China not providing an isolated virus must be true when the 
‘virus’ has never been isolated to this day and the consequences of 
that will become clear. Drosten and company produced this useless 
‘protocol’ right on cue in January, 2020, just as the ‘virus’ was said to 


be moving westward and it somehow managed to successfully pass 
a peer-review in 24 hours. In other words there was no peer-review 
for a test that would be used to decide who had ‘Covid’ and who 
didn’t across the world. The Cult-created, Gates-controlled World 
Health Organization immediately recommended all its nearly 200 
member countries to use the Drosten PCR protocol to detect ‘cases’ 
and ‘deaths’. The sting was underway and it continues to this day. 


So who is this Christian Drosten that produced the means through 
which death, destruction and economic catastrophe would be 
justified? His education background, including his doctoral thesis, 
would appear to be somewhat shrouded in mystery and his track 
record is dire as with another essential player in the ‘Covid’ hoax, 
the Gates-funded Professor Neil Ferguson at the Gates-funded 
Imperial College in London of whom more shortly. Drosten 
predicted in 2003 that the alleged original SARS ‘virus’ (SARS-1’) 
was an epidemic that could have serious effects on economies and an 
effective vaccine would take at least two years to produce. Drosten’s 
answer to every alleged ‘outbreak’ is a vaccine which you won't be 
shocked to know. What followed were just 774 official deaths 
worldwide and none in Germany where there were only nine cases. 
That is even if you believe there ever was a SARS ‘virus’ when the 
evidence is zilch and I will expand on this in the next chapter. 
Drosten claims to be co-discoverer of ‘SARS-1’ and developed a test 
for it in 2003. He was screaming warnings about ‘swine flu’ in 2009 
and how it was a widespread infection far more severe than any 
dangers from a vaccine could be and people should get vaccinated. It 
would be helpful for Drosten’s vocal chords if he simply recorded 
the words ‘the virus is deadly and you need to get vaccinated’ and 
copies could be handed out whenever the latest made-up threat 
comes along. Drosten’s swine flu epidemic never happened, but Big 
Pharma didn’t mind with governments spending hundreds of 
millions on vaccines that hardly anyone bothered to use and many 
who did wished they hadn’t. A study in 2010 revealed that the risk 
of dying from swine flu, or H1IN1, was no higher than that of the 
annual seasonal flu which is what at least most of ‘it’ really was as in 


the case of ‘Covid-19’. A media investigation into Drosten asked 
how with such a record of inaccuracy he could be the government 
adviser on these issues. The answer to that question is the same with 
Drosten, Ferguson and Fauci — they keep on giving the authorities 
the ‘conclusions’ and ‘advice’ they want to hear. Drosten certainly 
produced the goods for them in January, 2020, with his PCR protocol 
garbage and provided the foundation of what German internal 
medicine specialist Dr Claus Kohnlein, co-author of Virus Mania, 
called the ‘test pandemic’. The 22 scientists in the Eurosurveillance 
challenge called out conflicts of interest within the Drosten ‘protocol’ 
group and with good reason. Olfert Landt, a regular co-author of 
Drosten ‘studies’, owns the biotech company TIB Molbiol 
Syntheselabor GmbH in Berlin which manufactures and sells the 
tests that Drosten and his mates come up with. They have done this 
with SARS, Enterotoxigenic E. coli (ETEC), MERS, Zika ‘virus’, 
yellow fever, and now ‘Covid’. Landt told the Berliner Zeitung 
newspaper: 


The testing, design and development came from the Charité [Drosten and Corman]. We 
simply implemented it immediately in the form of a kit. And if we don’t have the virus, which 
originally only existed in Wuhan, we can make a synthetic gene to simulate the genome of the 
virus. That’s what we did very quickly. 


This is more confirmation that the Drosten test was designed 
without access to the ‘virus’ and only a synthetic simulation which is 
what SARS-CoV-2 really is —- a computer-generated synthetic fiction. 
It’s quite an enterprise they have going here. A Drosten team decides 
what the test for something should be and Landt’s biotech company 
flogs it to governments and medical systems across the world. His 
company must have made an absolute fortune since the ‘Covid’ hoax 
began. Dr Reiner Fuellmich, a prominent German consumer 
protection trial lawyer in Germany and California, is on Drosten’s 
case and that of Tedros at the World Health Organization for crimes 
against humanity with a class-action lawsuit being prepared in the 
United States and other legal action in Germany. 


Scamming the world with a ‘virus’ that doesn’t exist would seem 
impossible on the face of it, but not if you have control of the 
relatively few people that make policy decisions and the great 
majority of the global media. Remember it’s not about changing 
‘real’ reality it’s about controlling perception of reality. You don’t have 
to make something happen you only have make people believe that 
it’s happening. Renegade Minds understand this and are therefore 
much harder to swindle. ‘Covid-19 is not a ‘real’ ‘virus’. It’s a mind 
virus, like a computer virus, which has infected the minds, not the 
bodies, of billions. It all started, publically at least, in China and that 
alone is of central significance. The Cult was behind the revolution 
led by its asset Mao Zedong, or Chairman Mao, which established 
the People’s Republic of China on October 1st, 1949. It should have 
been called The Cult’s Republic of China, but the name had to reflect 
the recurring illusion that vicious dictatorships are run by and for 
the people (see all the ‘Democratic Republics’ controlled by tyrants). 
In the same way we have the ‘Biden’ Democratic Republic of 
America officially ruled by a puppet tyrant (at least temporarily) on 
behalf of Cult tyrants. The creation of Mao’s merciless 
communist/fascist dictatorship was part of a frenzy of activity by the 
Cult at the conclusion of World War Two which, like the First World 
War, it had instigated through its assets in Germany, Britain, France, 
the United States and elsewhere. Israel was formed in 1948; the 
Soviet Union expanded its ‘Iron Curtain’ control, influence and 
military power with the Warsaw Pact communist alliance in 1955; 
the United Nations was formed in 1945 as a Cult precursor to world 
government; and a long list of world bodies would be established 
including the World Health Organization (1948), World Trade 
Organization (1948 under another name until 1995), International 
Monetary Fund (1945) and World Bank (1944). Human society was 
redrawn and hugely centralised in the global Problem-Reaction- 
Solution that was World War Two. All these changes were 
significant. Israel would become the headquarters of the Sabbatians 


and the revolution in China would prepare the ground and control 
system for the events of 2019/2020. 


Renegade Minds know there are no borders except for public 
consumption. The Cult is a seamless, borderless global entity and to 
understand the game we need to put aside labels like borders, 
nations, countries, communism, fascism and democracy. These 
delude the population into believing that countries are ruled within 
their borders by a government of whatever shade when these are 
mere agencies of a global power. America’s illusion of democracy 
and China’s communism/fascism are subsidiaries — vehicles — for the 
same agenda. We may hear about conflict and competition between 
America and China and on the lower levels that will be true; but at 
the Cult level they are branches of the same company in the way of 
the McDonald’s example I gave earlier. I have tracked in the books 
over the years support by US governments of both parties for 
Chinese Communist Party infiltration of American society through 
allowing the sale of land, even military facilities, and the acquisition 
of American business and university influence. All this is 
underpinned by the infamous stealing of intellectual property and 
technological know-how. Cult-owned Silicon Valley corporations 
waive their fraudulent ‘morality’ to do business with human-rights- 
free China; Cult-controlled Disney has become China’s PR 
department; and China in effect owns ‘American’ sports such as 
basketball which depends for much of its income on Chinese 
audiences. As a result any sports player, coach or official speaking 
out against China’s horrific human rights record is immediately 
condemned or fired by the China-worshipping National Basketball 
Association. One of the first acts of China-controlled Biden was to 
issue an executive order telling federal agencies to stop making 
references to the ‘virus’ by the ‘geographic location of its origin’. 
Long-time Congressman Jerry Nadler warned that criticising China, 
America’s biggest rival, leads to hate crimes against Asian people in 
the United States. So shut up you bigot. China is fast closing in on 
Israel as a country that must not be criticised which is apt, really, 
given that Sabbatians control them both. The two countries have 


developed close economic, military, technological and strategic ties 
which include involvement in China’s ‘Silk Road’ transport and 
economic initiative to connect China with Europe. Israel was the first 
country in the Middle East to recognise the establishment of Mao’s 
tyranny in 1950 months after it was established. 


Project Wuhan — the ‘Covid' Psyop 

I emphasise again that the Cult plays the long game and what is 
happening to the world today is the result of centuries of calculated 
manipulation following a script to take control step-by-step of every 
aspect of human society. I will discuss later the common force 
behind all this that has spanned those centuries and thousands of 
years if the truth be told. Instigating the Mao revolution in China in 
1949 with a 2020 ‘pandemic’ in mind is not only how they work — the 
71 years between them is really quite short by the Cult’s standards of 
manipulation preparation. The reason for the Cult’s Chinese 
revolution was to create a fiercely-controlled environment within 
which an extreme structure for human control could be incubated to 
eventually be unleashed across the world. We have seen this happen 
since the ‘pandemic’ emerged from China with the Chinese control- 
structure founded on AI technology and tyrannical enforcement 
sweep across the West. Until the moment when the Cult went for 
broke in the West and put its fascism on public display Western 
governments had to pay some lip-service to freedom and democracy 
to not alert too many people to the tyranny-in-the-making. Freedoms 
were more subtly eroded and power centralised with covert 
government structures put in place waiting for the arrival of 2020 
when that smokescreen of ‘freedom’ could be dispensed with. The 
West was not able to move towards tyranny before 2020 anything 
like as fast as China which was created as a tyranny and had no 
limits on how fast it could construct the Cult’s blueprint for global 
control. When the time came to impose that structure on the world it 
was the same Cult-owned Chinese communist/fascist government 
that provided the excuse — the ‘Covid pandemic’. It was absolutely 
crucial to the Cult plan for the Chinese response to the ‘pandemic’ — 


draconian lockdowns of the entire population — to become the 
blueprint that Western countries would follow to destroy the 
livelihoods and freedom of their people. This is why the Cult- 
owned, Gates-owned, WHO Director-General Tedros said early on: 


The Chinese government is to be congratulated for the extraordinary measures it has taken to 
contain the outbreak. China is actually setting a new standard for outbreak response and it is 
not an exaggeration. 


Forbes magazine said of China: ’... those measures protected untold 
millions from getting the disease’. The Rockefeller Foundation 
‘epidemic scenario’ document in 2010 said “prophetically’: 


However, a few countries did fare better — China in particular. The Chinese government's 
quick imposition and enforcement of mandatory quarantine for all citizens, as well as its 
instant and near-hermetic sealing off of all borders, saved millions of lives, stopping the spread 
of the virus far earlier than in other countries and enabling a swifter post-pandemic recovery. 


Once again — spooky. 

The first official story was the “bat theory’ or rather the bat 
diversion. The source of the ‘virus outbreak’ we were told was a 
“wet market’ in Wuhan where bats and other animals are bought 
and eaten in horrifically unhygienic conditions. Then another story 
emerged through the alternative media that the ‘virus’ had been 
released on purpose or by accident from a BSL-4 (biosafety level 4) 
laboratory in Wuhan not far from the wet market. The lab was 
reported to create and work with lethal concoctions and 
bioweapons. Biosafety level 4 is the highest in the World Health 
Organization system of safety and containment. Renegade Minds are 
aware of what I call designer manipulation. The ideal for the Cult is 
for people to buy its prime narrative which in the opening salvoes of 
the ‘pandemic’ was the wet market story. It knows, however, that 
there is now a considerable worldwide alternative media of 
researchers sceptical of anything governments say and they are often 
given a version of events in a form they can perceive as credible 
while misdirecting them from the real truth. In this case let them 


think that the conspiracy involved is a ‘bioweapon virus’ released 
from the Wuhan lab to keep them from the real conspiracy — there is 
no ‘virus’. The WHO's current position on the source of the outbreak 
at the time of writing appears to be: ‘We haven't got a clue, mate.’ 
This is a good position to maintain mystery and bewilderment. The 
inner circle will know where the ‘virus’ came from — nowhere. The 
bottom line was to ensure the public believed there was a ‘virus’ and 
it didn’t much matter if they thought it was natural or had been 
released from a lab. The belief that there was a ‘deadly virus’ was all 
that was needed to trigger global panic and fear. The population was 
terrified into handing their power to authority and doing what they 
were told. They had to or they were ‘all gonna die’. 


In March, 2020, information began to come my way from real 
doctors and scientists and my own additional research which had 
my intuition screaming: ‘Yes, that’s it! There is no virus.’ The 
‘bioweapon’ was not the ‘virus’; it was the ‘vaccine’ already being 
talked about that would be the bioweapon. My conclusion was 
further enhanced by happenings in Wuhan. The ‘virus’ was said to 
be sweeping the city and news footage circulated of people 
collapsing in the street (which they’ve never done in the West with 
the same ‘virus’). The Chinese government was building ‘new 
hospitals’ in a matter of ten days to ‘cope with demand’ such was the 
virulent nature of the ‘virus’. Yet in what seemed like no time the 
‘new hospitals’ closed — even if they even opened — and China 
declared itself ‘virus-free’. It was back to business as usual. This was 
more propaganda to promote the Chinese draconian lockdowns in 
the West as the way to ‘beat the virus’. Trouble was that we 
subsequently had lockdown after lockdown, but never business as 
usual. As the people of the West and most of the rest of the world 
were caught in an ever-worsening spiral of lockdown, social 
distancing, masks, isolated old people, families forced apart, and 
livelihood destruction, it was party-time in Wuhan. Pictures 
emerged of thousands of people enjoying pool parties and concerts. 
It made no sense until you realised there never was a ‘virus’ and the 


whole thing was a Cult set-up to transform human society out of one 
its major global strongholds — China. 


How is it possible to deceive virtually the entire world population 
into believing there is a deadly virus when there is not even a ‘virus’ 
let alone a deadly one? It’s nothing like as difficult as you would 
think and that’s clearly true because it happened. 


Postscript: See end of book Postscript for more on the ‘Wuhan lab 
virus release’ story which the authorities and media were pushing 
heavily in the summer of 2021 to divert attention from the truth that 
the ‘Covid virus’ is pure invention. 


CHAPTER FIVE 
There is no ‘virus’ 


You can fool some of the people all of the time, and all of the people 
some of the time, but you cannot fool all of the people all of the time 
Abraham Lincoln 


he greatest form of mind control is repetition. The more you 

repeat the same mantra of alleged ‘facts’ the more will accept 
them to be true. It becomes an ‘everyone knows that, mate’. If you 
can also censor any other version or alternative to your alleged 
‘facts’ you are pretty much home and cooking. 


By the start of 2020 the Cult owned the global mainstream media 
almost in its entirety to spew out its ‘Covid’ propaganda and ignore 
or discredit any other information and view. Cult-owned social 
media platforms in Cult-owned Silicon Valley were poised and 
ready to unleash a campaign of ferocious censorship to obliterate all 
but the official narrative. To complete the circle many demands for 
censorship by Silicon Valley were led by the mainstream media as 
‘journalists’ became full-out enforcers for the Cult both as 
propagandists and censors. Part of this has been the influx of young 
people straight out of university who have become ‘journalists’ in 
significant positions. They have no experience and a headful of 
programmed perceptions from their years at school and university at 
a time when today’s young are the most perceptually-targeted 
generations in known human history given the insidious impact of 
technology. They enter the media perceptually prepared and ready 
to repeat the narratives of the system that programmed them to 


repeat its narratives. The BBC has a truly pathetic ‘specialist 
disinformation reporter’ called Marianna Spring who fits this bill 
perfectly. She is clueless about the world, how it works and what is 
really going on. Her role is to discredit anyone doing the job that a 
proper journalist would do and system-serving hacks like Spring 
wouldn't dare to do or even see the need to do. They are too busy 
licking the arse of authority which can never be wrong and, in the 
case of the BBC propaganda programme, Panorama, contacting 
payments systems such as PayPal to have a donations page taken 
down for a film company making documentaries questioning 
vaccines. Even the BBC soap opera EastEnders included a 
disgracefully biased scene in which an inarticulate white working 
class woman was made to look foolish for questioning the ‘vaccine’ 
while a well-spoken black man and Asian woman promoted the 
government narrative. It ticked every BBC box and the fact that the 
black and minority community was resisting the ‘vaccine’ had 
nothing to do with the way the scene was written. The BBC has 
become a disgusting tyrannical propaganda and censorship 
operation that should be defunded and disbanded and a free media 
take its place with a brief to stop censorship instead of demanding it. 
A BBC ‘interview’ with Gates goes something like: ‘Mr Gates, sir, if I 
can call you sir, would you like to tell our audience why you are 
such a great man, a wonderful humanitarian philanthropist, and 
why you should absolutely be allowed as a software salesman to 
decide health policy for approaching eight billion people? Thank 
you, sir, please sir.’ Propaganda programming has been incessant 
and merciless and when all you hear is the same story from the 
media, repeated by those around you who have only heard the same 
story, is it any wonder that people on a grand scale believe absolute 
mendacious garbage to be true? You are about to see, too, why this 
level of information control is necessary when the official “Covid’ 
narrative is so nonsensical and unsupportable by the evidence. 


The pyramid structure through which the ‘Covid’ hoax has been 
manifested is very simple and has to be to work. As few people as 
possible have to be involved with full knowledge of what they are 
doing — and why - or the real story would get out. At the top of the 
pyramid are the inner core of the Cult which controls Bill Gates who, 
in turn, controls the World Health Organization through his pivotal 
funding and his puppet Director-General mouthpiece, Tedros. 
Before he was appointed Tedros was chair of the Gates-founded 
Global Fund to ‘fight against AIDS, tuberculosis and malaria’, a 
board member of the Gates-funded ‘vaccine alliance’ GAVI, and on 
the board of another Gates-funded organisation. Gates owns him 
and picked him for a specific reason — Tedros is a crook and worse. 
‘Dr’ Tedros (he’s not a medical doctor, the first WHO chief not to be) 
was a member of the tyrannical Marxist government of Ethiopia for 
decades with all its human rights abuses. He has faced allegations of 
corruption and misappropriation of funds and was exposed three 
times for covering up cholera epidemics while Ethiopia’s health 
minister. Tedros appointed the mass-murdering genocidal 
Zimbabwe dictator Robert Mugabe as a WHO goodwill ambassador 
for public health which, as with Tedros, is like appointing a 
psychopath to run a peace and love campaign. The move was so 
ridiculous that he had to drop Mugabe in the face of widespread 
condemnation. American economist David Steinman, a Nobel peace 
prize nominee, lodged a complaint with the International Criminal 
Court in The Hague over alleged genocide by Tedros when he was 
Ethiopia’s foreign minister. Steinman says Tedros was a ‘crucial 
decision maker’ who directed the actions of Ethiopia’s security forces 
from 2013 to 2015 and one of three officials in charge when those 
security services embarked on the ‘killing’ and ‘torturing’ of 
Ethiopians. You can see where Tedros is coming from and it’s 
sobering to think that he has been the vehicle for Gates and the Cult 
to direct the global response to ‘Covid’. Think about that. A 
psychopathic Cult dictates to psychopath Gates who dictates to 
psychopath Tedros who dictates how countries of the world must 
respond to a ‘Covid virus’ never scientifically shown to exist. At the 
same time psychopathic Cult-owned Silicon Valley information 


giants like Google, YouTube, Facebook and Twitter announced very 
early on that they would give the Cult/Gates/Tedros/WHO version 
of the narrative free advertising and censor those who challenged 
their intelligence-insulting, mendacious story. 

The next layer in the global ‘medical’ structure below the Cult, 
Gates and Tedros are the chief medical officers and science ‘advisers’ 
in each of the WHO member countries which means virtually all of 
them. Medical officers and arbiters of science (they’re not) then take 
the WHO policy and recommended responses and impose them on 
their country’s population while the political ‘leaders’ say they are 
deciding policy (they’re clearly not) by ‘following the science’ on the 
advice of the ‘experts’ — the same medical officers and science 
‘advisers’ (dictators). In this way with the rarest of exceptions the 
entire world followed the same policy of lockdown, people 
distancing, masks and ‘vaccines’ dictated by the psychopathic Cult, 
psychopathic Gates and psychopathic Tedros who we are supposed 
to believe give a damn about the health of the world population they 
are seeking to enslave. That, amazingly, is all there is to it in terms of 
crucial decision-making. Medical staff in each country then follow 
like sheep the dictates of the shepherds at the top of the national 
medical hierarchies — chief medical officers and science ‘advisers’ 
who themselves follow like sheep the shepherds of the World Health 
Organization and the Cult. Shepherds at the national level often 
have major funding and other connections to Gates and his Bill and 
Melinda Gates Foundation which carefully hands out money like 
confetti at a wedding to control the entire global medical system 
from the WHO down. 


Follow the money 

Christopher Whitty, Chief Medical Adviser to the UK Government at 
the centre of ‘virus’ policy, a senior adviser to the government's 
Scientific Advisory Group for Emergencies (SAGE), and Executive 
Board member of the World Health Organization, was gifted a grant 
of $40 million by the Bill and Melinda Gates Foundation for malaria 
research in Africa. The BBC described the unelected Whitty as ‘the 


official who will probably have the greatest impact on our everyday 
lives of any individual policymaker in modern times’ and so it 
turned out. What Gates and Tedros have said Whitty has done like 
his equivalents around the world. Patrick Vallance, co-chair of SAGE 
and the government's Chief Scientific Adviser, is a former executive 
of Big Pharma giant GlaxoSmithKline with its fundamental financial 
and business connections to Bill Gates. In September, 2020, it was 
revealed that Vallance owned a deferred bonus of shares in 
GlaxoSmithKline worth £600,000 while the company was 
‘developing’ a ‘Covid vaccine’. Move along now — nothing to see 
here — what could possibly be wrong with that? Imperial College in 
London, a major player in ‘Covid’ policy in Britain and elsewhere 
with its ‘Covid-19’ Response Team, is funded by Gates and has big 
connections to China while the now infamous Professor Neil 
Ferguson, the useless ‘computer modeller’ at Imperial College is also 
funded by Gates. Ferguson delivered the dramatically inaccurate 
excuse for the first lockdowns (much more in the next chapter). The 
Institute for Health Metrics and Evaluation (IHME) in the United 
States, another source of outrageously false ‘Covid’ computer 
models to justify lockdowns, is bankrolled by Gates who is a 
vehement promotor of lockdowns. America’s version of Whitty and 
Vallance, the again now infamous Anthony Fauci, has connections to 
‘Covid vaccine’ maker Moderna as does Bill Gates through funding 
from the Bill and Melinda Gates Foundation. Fauci is director of the 
National Institute of Allergy and Infectious Diseases (NIAID), a 
major recipient of Gates money, and they are very close. Deborah 
Birx who was appointed White House Coronavirus Response 
Coordinator in February, 2020, is yet another with ties to Gates. 
Everywhere you look at the different elements around the world 
behind the coordination and decision making of the ‘Covid’ hoax 
there is Bill Gates and his money. They include the World Health 
Organization; Centers for Disease Control (CDC) in the United 
States; National Institutes of Health (NIH) of Anthony Fauci; 
Imperial College and Neil Ferguson; the London School of Hygiene 
where Chris Whitty worked; Regulatory agencies like the UK 
Medicines & Healthcare products Regulatory Agency (MHRA) 


which gave emergency approval for ‘Covid vaccines’; Wellcome 
Trust; GAVI, the Vaccine Alliance; the Coalition for Epidemic 
Preparedness Innovations (CEPI); Johns Hopkins University which 
has compiled the false ‘Covid’ figures; and the World Economic 
Forum. A Nationalfile.com article said: 


Gates has a lot of pull in the medical world, he has a multi-million dollar relationship with Dr. 
Fauci, and Fauci originally took the Gates line supporting vaccines and casting doubt on [the 
drug hydroxychloroquine]. Coronavirus response team member Dr. Deborah Birx, appointed 
by former president Obama to serve as United States Global AIDS Coordinator, also sits on the 
board of a group that has received billions from Gates’ foundation, and Birx reportedly used a 
disputed Bill Gates-funded model for the White House’s Coronavirus effort. Gates is a big 
proponent for a population lockdown scenario for the Coronavirus outbreak. 


Another funder of Moderna is the Defense Advanced Research 
Projects Agency (DARPA), the technology-development arm of the 
Pentagon and one of the most sinister organisations on earth. 
DARPA had a major role with the CIA covert technology-funding 
operation In-Q-Tel in the development of Google and social media 
which is now at the centre of global censorship. Fauci and Gates are 
extremely close and openly admit to talking regularly about ‘Covid’ 
policy, but then why wouldn't Gates have a seat at every national 
‘Covid’ table after his Foundation committed $1.75 billion to the 
‘fight against Covid-19’. When passed through our Orwellian 
Translation Unit this means that he has bought and paid for the Cult- 
driven ‘Covid’ response worldwide. Research the major ‘Covid’ 
response personnel in your own country and you will find the same 
Gates funding and other connections again and again. Medical and 
science chiefs following World Health Organization ‘policy’ sit atop 
a medical hierarchy in their country of administrators, doctors and 
nursing staff. These ‘subordinates’ are told they must work and 
behave in accordance with the policy delivered from the ‘top’ of the 
national ‘health’ pyramid which is largely the policy delivered by 
the WHO which is the policy delivered by Gates and the Cult. The 
whole ‘Covid’ narrative has been imposed on medical staff by a 
climate of fear although great numbers don’t even need that to 
comply. They do so through breathtaking levels of ignorance and 


include doctors who go through life simply repeating what Big 
Pharma and their hierarchical masters tell them to say and believe. 
No wonder Big Pharma ‘medicine’ is one of the biggest killers on 
Planet Earth. 

The same top-down system of intimidation operates with regard 
to the Cult Big Pharma cartel which also dictates policy through 
national and global medical systems in this way. The Cult and Big 
Pharma agendas are the same because the former controls and owns 
the latter. ‘Health’ administrators, doctors, and nursing staff are told 
to support and parrot the dictated policy or they will face 
consequences which can include being fired. How sad it’s been to see 
medical staff meekly repeating and imposing Cult policy without 
question and most of those who can see through the deceit are only 
willing to speak anonymously off the record. They know what will 
happen if their identity is known. This has left the courageous few to 
expose the lies about the ‘virus’, face masks, overwhelmed hospitals 
that aren’t, and the dangers of the ‘vaccine’ that isn’t a vaccine. When 
these medical professionals and scientists, some renowned in their 
field, have taken to the Internet to expose the truth their articles, 
comments and videos have been deleted by Cult-owned Facebook, 
Twitter and YouTube. What a real head-shaker to see YouTube 
videos with leading world scientists and highly qualified medical 
specialists with an added link underneath to the notorious Cult 
propaganda website Wikipedia to find the ‘facts’ about the same 
subject. 


HIV — the ‘Covid' trial-run 

I'll give you an example of the consequences for health and truth 
that come from censorship and unquestioning belief in official 
narratives. The story was told by PCR inventor Kary Mullis in his 
book Dancing Naked in the Mind Field. He said that in 1984 he 
accepted as just another scientific fact that Luc Montagnier of 
France’s Pasteur Institute and Robert Gallo of America’s National 
Institutes of Health had independently discovered that a ‘retrovirus’ 
dubbed HIV (human immunodeficiency virus) caused AIDS. They 


were, after all, Mullis writes, specialists in retroviruses. This is how 
the medical and science pyramids work. Something is announced or 
assumed and then becomes an everybody-knows-that purely through 
repetition of the assumption as if it is fact. Complete crap becomes 
accepted truth with no supporting evidence and only repetition of 
the crap. This is how a ‘virus’ that doesn’t exist became the ‘virus’ 
that changed the world. The HIV-AIDS fairy story became a mullti- 
billion pound industry and the media poured out propaganda 
terrifying the world about the deadly HIV ‘virus’ that caused the 
lethal AIDS. By then Mullis was working at a lab in Santa Monica, 
California, to detect retroviruses with his PCR test in blood 
donations received by the Red Cross. In doing so he asked a 
virologist where he could find a reference for HIV being the cause of 
AIDS. “You don’t need a reference,’ the virologist said ... “Everybody 
knows tt.” Mullis said he wanted to quote a reference in the report he 
was doing and he said he felt a little funny about not knowing the 
source of such an important discovery when everyone else seemed 
to. The virologist suggested he cite a report by the Centers for 
Disease Control and Prevention (CDC) on morbidity and mortality. 
Mullis read the report, but it only said that an organism had been 
identified and did not say how. The report did not identify the 
original scientific work. Physicians, however, assumed (key recurring 
theme) that if the CDC was convinced that HIV caused AIDS then 
proof must exist. Mullis continues: 


| did computer searches. Neither Montagnier, Gallo, nor anyone else had published papers 
describing experiments which led to the conclusion that HIV probably caused AIDS. | read 
the papers in Science for which they had become well known as AIDS doctors, but all they 
had said there was that they had found evidence of a past infection by something which was 
probably HIV in some AIDS patients. 


They found antibodies. Antibodies to viruses had always been considered evidence of past 
disease, not present disease. Antibodies signaled that the virus had been defeated. The patient 
had saved himself. There was no indication in these papers that this virus caused a disease. 
They didn’t show that everybody with the antibodies had the disease. In fact they found some 
healthy people with antibodies. 


Mullis asked why their work had been published if Montagnier 
and Gallo hadn't really found this evidence, and why had they been 
fighting so hard to get credit for the discovery? He says he was 
hesitant to write ‘HIV is the probable cause of AIDS’ until he found 
published evidence to support that. ‘Tens of thousands of scientists 
and researchers were spending billions of dollars a year doing 
research based on this idea,’ Mullis writes. “The reason had to be 
there somewhere; otherwise these people would not have allowed 
their research to settle into one narrow channel of investigation.’ He 
said he lectured about PCR at numerous meetings where people 
were always talking about HIV and he asked them how they knew 
that HIV was the cause of AIDS: 


Everyone said something. Everyone had the answer at home, in the office, in some drawer. 
They all knew, and they would send me the papers as soon as they got back. But | never got 
any papers. Nobody ever sent me the news about how AIDS was caused by HIV. 


Eventually Mullis was able to ask Montagnier himself about the 
reference proof when he lectured in San Diego at the grand opening 
of the University of California AIDS Research Center. Mullis says 
this was the last time he would ask his question without showing 
anger. Montagnier said he should reference the CDC report. ‘I read 
it’, Mullis said, and it didn’t answer the question. ‘If Montagnier 
didn’t know the answer who the hell did?’ Then one night Mullis 
was driving when an interview came on National Public Radio with 
Peter Duesberg, a prominent virologist at Berkeley and a California 
Scientist of the Year. Mullis says he finally understood why he could 
not find references that connected HIV to AIDS — there weren't any! 
No one had ever proved that HIV causes AIDS even though it had 
spawned a multi-billion pound global industry and the media was 
repeating this as fact every day in their articles and broadcasts 
terrifying the shit out of people about AIDS and giving the 
impression that a positive test for HIV (see ‘Covid’) was a death 
sentence. Duesberg was a threat to the AIDS gravy train and the 
agenda that underpinned it. He was therefore abused and castigated 
after he told the Proceedings of the National Academy of Sciences 


there was no good evidence implicating the new ‘virus’. Editors 
rejected his manuscripts and his research funds were deleted. Mullis 
points out that the CDC has defined AIDS as one of more than 30 
diseases if accompanied by a positive result on a test that detects 
antibodies to HIV; but those same diseases are not defined as AIDS 
cases when antibodies are not detected: 


If an HIV-positive woman develops uterine cancer, for example, she is considered to have 
AIDS. If she is not HIV positive, she simply has uterine cancer. An HIV-positive man with 
tuberculosis has AIDS; if he tests negative he simply has tuberculosis. If he lives in Kenya or 
Colombia, where the test for HIV antibodies is too expensive, he is simply presumed to have 
the antibodies and therefore AIDS, and therefore he can be treated in the World Health 
Organization’s clinic. It’s the only medical help available in some places. And it’s free, 
because the countries that support WHO are worried about AIDS. 


Mullis accuses the CDC of continually adding new diseases (see ever 
more ‘Covid symptoms’) to the grand AIDS definition and of 
virtually doctoring the books to make it appear as if the disease 
continued to spread. He cites how in 1993 the CDC enormously 
broadened its AIDS definition and county health authorities were 
delighted because they received $2,500 per year from the Federal 
government for every reported AIDS case. Ladies and gentlemen, I 
have just described, via Kary Mullis, the ‘Covid pandemic’ of 2020 
and beyond. Every element is the same and it’s been pulled off in the 
same way by the same networks. 


The ‘Covid virus’ exists? Okay — prove it. Er... still waiting 

What Kary Mullis described with regard to ‘HIV’ has been repeated 
with ‘Covid’. A claim is made that a new, or ‘novel’, infection has 
been found and the entire medical system of the world repeats that 
as fact exactly as they did with HIV and AIDS. No one in the 
mainstream asks rather relevant questions such as ‘How do you 
know?’ and ‘Where is your proof?’ The SARS-Cov-2 ‘virus’ and the 
‘Covid-19 disease’ became an overnight ‘everybody-knows-that’. 
The origin could be debated and mulled over, but what you could 
not suggest was that ‘SARS-Cov-2’ didn’t exist. That would be 


ridiculous. ‘Everybody knows’ the ‘virus’ exists. Well, I didn’t for 
one along with American proper doctors like Andrew Kaufman and 
Tom Cowan and long-time American proper journalist Jon 
Rappaport. We dared to pursue the obvious and simple question: 
‘Where’s the evidence?’ The overwhelming majority in medicine, 
journalism and the general public did not think to ask that. After all, 
everyone knew there was a new ‘virus’. Everyone was saying so and I 
heard it on the BBC. Some would eventually argue that the ‘deadly 
virus’ was nothing like as deadly as claimed, but few would venture 
into the realms of its very existence. Had they done so they would 
have found that the evidence for that claim had gone AWOL as with 
HIV causes AIDS. In fact, not even that. For something to go AWOL 
it has to exist in the first place and scientific proof for a ‘SARS-Cov-2’ 
can be filed under nothing, nowhere and zilch. 

Dr Andrew Kaufman is a board-certified forensic psychiatrist in 
New York State, a Doctor of Medicine and former Assistant 
Professor and Medical Director of Psychiatry at SUNY Upstate 
Medical University, and Medical Instructor of Hematology and 
Oncology at the Medical School of South Carolina. He also studied 
biology at the Massachusetts Institute of Technology (MIT) and 
trained in Psychiatry at Duke University. Kaufman is retired from 
allopathic medicine, but remains a consultant and educator on 
natural healing, I saw a video of his very early on in the ‘Covid’ hoax 
in which he questioned claims about the ‘virus’ in the absence of any 
supporting evidence and with plenty pointing the other way. I did 
everything I could to circulate his work which I felt was asking the 
pivotal questions that needed an answer. I can recommend an 
excellent pull-together interview he did with the website The Last 
Vagabond entitled Dr Andrew Kaufman: Virus Isolation, Terrain Theory 
and Covid-19 and his website is andrewkaufmanmd.com. Kaufman is 
not only a forensic psychiatrist; he is forensic in all that he does. He 
always reads original scientific papers, experiments and studies 
instead of second-third-fourth-hand reports about the ‘virus’ in the 
media which are repeating the repeated repetition of the narrative. 
When he did so with the original Chinese ‘virus’ papers Kaufman 


realised that there was no evidence of a ‘SARS-Cov-2’. They had 
never — from the start — shown it to exist and every repeat of this 
claim worldwide was based on the accepted existence of proof that 
was nowhere to be found — see Kary Mullis and HIV. Here we go 
again. 


Let's postulate 

Kaufman discovered that the Chinese authorities immediately 
concluded that the cause of an illness that broke out among about 
200 initial patients in Wuhan was a ‘new virus’ when there were no 
grounds to make that conclusion. The alleged ‘virus’ was not 
isolated from other genetic material in their samples and then shown 
through a system known as Koch’s postulates to be the causative 
agent of the illness. The world was told that the SARS-Cov-2 ‘virus’ 
caused a disease they called ‘Covid-19’ which had ‘flu-like’ 
symptoms and could lead to respiratory problems and pneumonia. 
If it wasn’t so tragic it would almost be funny. “Flu-like’ symptoms’? 
Pneumonia? Respiratory disease? What in CHINA and particularly in 
Wuhan, one of the most polluted cities in the world with a resulting 
epidemic of respiratory disease?? Three hundred thousand people 
get pneumonia in China every year and there are nearly a billion 
cases worldwide of ‘flu-like symptoms’. These have a whole range of 
causes — including pollution in Wuhan — but no other possibility was 
credibly considered in late 2019 when the world was told there was a 
new and deadly ‘virus’. The global prevalence of pneumonia and 
‘flu-like systems’ gave the Cult networks unlimited potential to re- 
diagnose these other causes as the mythical ‘Covid-19’ and that is 
what they did from the very start. Kaufman revealed how Chinese 
medical and science authorities (all subordinates to the Cult-owned 
communist government) took genetic material from the lungs of 
only a few of the first patients. The material contained their own 
cells, bacteria, fungi and other microorganisms living in their bodies. 
The only way you could prove the existence of the ‘virus’ and its 
responsibility for the alleged ‘Covid-19% was to isolate the virus from 
all the other material — a process also known as ‘purification’ — and 


then follow the postulates sequence developed in the late 19th 
century by German physician and bacteriologist Robert Koch which 
became the ‘gold standard’ for connecting an alleged causation 
agent to a disease: 


1. The microorganism (bacteria, fungus, virus, etc.) must be present in every case of the 
disease and all patients must have the same symptoms. It must also not be present in healthy 
individuals. 


2. The microorganism must be isolated from the host with the disease. If the microorganism 
is a bacteria or fungus it must be grown in a pure culture. If it is a virus, it must be purified 
(i.e. containing no other material except the virus particles) from a clinical sample. 


3. The specific disease, with all of its characteristics, must be reproduced when the 
infectious agent (the purified virus or a pure culture of bacteria or fungi) is inoculated into a 
healthy, susceptible host. 


4. The microorganism must be recoverable from the experimentally infected host as in step 
2; 


Not one of these criteria has been met in the case of ‘SARS-Cov-2’ and 
‘Covid-19’. Not ONE. EVER. Robert Koch refers to bacteria and not 
viruses. What are called ‘viral particles’ are so minute (hence masks 
are useless by any definition) that they could only be seen after the 
invention of the electron microscope in the 1930s and can still only 
be observed through that means. American bacteriologist and 
virologist Thomas Milton Rivers, the so-called ‘Father of Modern 
Virology’ who was very significantly director of the Rockefeller 
Institute for Medical Research in the 1930s, developed a less 
stringent version of Koch’s postulates to identify ‘virus’ causation 
known as ‘Rivers criteria’. ‘Covid’ did not pass that process either. 
Some even doubt whether any ‘virus’ can be isolated from other 
particles containing genetic material in the Koch method. Freedom 
of Information requests in many countries asking for scientific proof 
that the ‘Covid virus’ has been purified and isolated and shown to 
exist have all come back with a ‘we don’t have that’ and when this 
happened with a request to the UK Department of Health they 
added this comment: 


However, outside of the scope of the [Freedom of Information Act] and on a discretionary 
basis, the following information has been advised to us, which may be of interest. Most 
infectious diseases are caused by viruses, bacteria or fungi. Some bacteria or fungi have the 
capacity to grow on their own in isolation, for example in colonies on a petri dish. Viruses are 
different in that they are what we call ‘obligate pathogens’ — that is, they cannot survive or 
reproduce without infecting a host ... 


... For some diseases, it is possible to establish causation between a microorganism and a 
disease by isolating the pathogen from a patient, growing it in pure culture and reintroducing 
it to a healthy organism. These are known as ‘Koch’s postulates’ and were developed in 1882. 
However, as our understanding of disease and different disease-causing agents has advanced, 
these are no longer the method for determining causation [Andrew Kaufman asks why in that 
case are there two published articles falsely claiming to satisfy Koch’s postulates]. 


It has long been known that viral diseases cannot be identified in this way as viruses cannot 
be grown in ‘pure culture’. When a patient is tested for a viral illness, this is normally done by 
looking for the presence of antigens, or viral genetic code in a host with molecular biology 
techniques [Kaufman asks how you could know the origin of these chemicals without having 
a pure culture for comparison]. 


For the record ‘antigens’ are defined so: 


Invading microorganisms have antigens on their surface that the human body can recognise as 
being foreign — meaning not belonging to it. When the body recognises a foreign antigen, 
lymphocytes (white blood cells) produce antibodies, which are complementary in shape to 
the antigen. 


Notwithstanding that this is open to question in relation to ‘SARS- 
Cov-2’ the presence of ‘antibodies’ can have many causes and they 
are found in people that are perfectly well. Kary Mullis said: 
‘Antibodies ... had always been considered evidence of past disease, 
not present disease.’ 


‘Covid really is a computer ‘virus’ 


Where the UK Department of Health statement says ‘viruses’ are 
now ‘diagnosed’ through a ‘viral genetic code in a host with 
molecular biology techniques’, they mean ... the PCR test which its 
inventor said cannot test for infectious disease. They have no 
credible method of connecting a ‘virus’ to a disease and we will see 
that there is no scientific proof that any ‘virus’ causes any disease or 
there is any such thing as a ‘virus’ in the way that it is described. 
Tenacious Canadian researcher Christine Massey and her team made 


some 40 Freedom of Information requests to national public health 
agencies in different countries asking for proof that SARS-CoV-2 has 
been isolated and not one of them could supply that information. 
Massey said of her request in Canada: ‘Freedom of Information 
reveals Public Health Agency of Canada has no record of ‘SARS- 
COV-2’ isolation performed by anyone, anywhere, ever.’ If you 
accept the comment from the UK Department of Health it’s because 
they can’t isolate a ‘virus’. Even so many ‘science’ papers claimed to 
have isolated the ‘Covid virus’ until they were questioned and had 
to admit they hadn’t. A reply from the Robert Koch Institute in 
Germany was typical: ‘I am not aware of a paper which purified 
isolated SARS-CoV-2.’ So what the hell was Christian Drosten and 
his gang using to design the ‘Covid’ testing protocol that has 
produced all the illusory Covid’ cases and ‘Covid’ deaths when the 
head of the Chinese version of the CDC admitted there was a 
problem right from the start in that the ‘virus’ had never been 
isolated/purified? Breathe deeply: What they are calling ‘Covid’ is 
actually created by a computer program i.e. they made it up — er, that’s 
it. They took lung fluid, with many sources of genetic material, from 
one single person alleged to be infected with Covid-19 by a PCR test 
which they claimed, without clear evidence, contained a ‘virus’. They 
used several computer programs to create a model of a theoretical 
virus genome sequence from more than fifty-six million small 
sequences of RNA, each of an unknown source, assembling them 
like a puzzle with no known solution. The computer filled in the 
gaps with sequences from bits in the gene bank to make it look like a 
bat SARS-like coronavirus! A wave of the magic wand and poof, an 
in silico (computer-generated) genome, a scientific fantasy, was 
created. UK health researcher Dr Kevin Corbett made the same point 
with this analogy: 


... It’s like giving you a few bones and saying that’s your fish. It could be any fish. Not even a 
skeleton. Here’s a few fragments of bones. That’s your fish ... It’s all from gene bank and the 
bits of the virus sequence that weren’t there they made up. 


They synthetically created them to fill in the blanks. That’s what genetics is; it’s a code. So it’s 
ABBBCCDDD and you're missing some what you think is EEE so you put it in. It’s all 


synthetic. You just manufacture the bits that are missing. This is the end result of the 
geneticization of virology. This is basically a computer virus. 


Further confirmation came in an email exchange between British 
citizen journalist Frances Leader and the government’s Medicines & 
Healthcare Products Regulatory Agency (the Gates-funded MHRA) 
which gave emergency permission for untested ‘Covid vaccines’ to 
be used. The agency admitted that the ‘vaccine’ is not based on an 
isolated ‘virus’, but comes from a computer-generated model. Frances 
Leader was naturally banned from Cult-owned fascist Twitter for 
making this exchange public. The process of creating computer- 
generated alleged ‘viruses’ is called ‘in silico’ or ‘in silicon’ — 
computer chips — and the term ‘in silico’ is believed to originate with 
biological experiments using only a computer in 1989. ‘Vaccines’ 
involved with ‘Covid’ are also produced ‘in silico’ or by computer 
not a natural process. If the original ‘virus’ is nothing more than a 
made-up computer model how can there be ‘new variants’ of 
something that never existed in the first place? They are not new 
‘variants’; they are new computer models only minutely different to 
the original program and designed to further terrify the population 
into having the ‘vaccine’ and submitting to fascism. You want a “new 
variant’? Click, click, enter — there you go. Tell the medical 
profession that you have discovered a ‘South African variant’, ‘UK 
variants’ or a ‘Brazilian variant’ and in the usual HIV-causes-AIDS 
manner they will unquestioningly repeat it with no evidence 
whatsoever to support these claims. They will go on television and 
warn about the dangers of ‘new variants’ while doing nothing more 
than repeating what they have been told to be true and knowing that 
any deviation from that would be career suicide. Big-time insiders 
will know it’s a hoax, but much of the medical community is clueless 
about the way they are being played and themselves play the public 
without even being aware they are doing so. What an interesting 
‘coincidence’ that AstraZeneca and Oxford University were 
conducting ‘Covid vaccine trials’ in the three countries — the UK, 
South Africa and Brazil — where the first three ‘variants’ were 
claimed to have ‘broken out’. 


Here's your ‘virus — it's a unicorn 

Dr Andrew Kaufman presented a brilliant analysis describing how 
the ‘virus’ was imagined into fake existence when he dissected an 
article published by Nature and written by 19 authors detailing 
alleged ‘sequencing of a complete viral genome’ of the ‘new SARS- 
CoV-2 virus’. This computer-modelled in silico genome was used as a 
template for all subsequent genome sequencing experiments that 
resulted in the so-called variants which he said now number more 
than 6,000. The fake genome was constructed from more than 56 
million individual short strands of RNA. Those little pieces were 
assembled into longer pieces by finding areas of overlapping 
sequences. The computer programs created over two million 
possible combinations from which the authors simply chose the 
longest one. They then compared this to a ‘bat virus’ and the 
computer ‘alignment’ rearranged the sequence and filled in the gaps! 
They called this computer-generated abomination the ‘complete 
genome’. Dr Tom Cowan, a fellow medical author and collaborator 
with Kaufman, said such computer-generation constitutes scientific 
fraud and he makes this superb analogy: 


Here is an equivalency: A group of researchers claim to have found a unicorn because they 
found a piece of a hoof, a hair from a tail, and a snippet of a horn. They then add that 
information into a computer and program it to re-create the unicorn, and they then claim this 
computer re-creation is the real unicorn. Of course, they had never actually seen a unicorn so 
could not possibly have examined its genetic makeup to compare their samples with the 
actual unicorn’s hair, hooves and horn. 


The researchers claim they decided which is the real genome of SARS-CoV-2 by ‘consensus’, 
sort of like a vote. Again, different computer programs will come up with different versions of 
the imaginary ‘unicorn’, so they come together as a group and decide which is the real 
imaginary unicorn. 


This is how the ‘virus’ that has transformed the world was brought 
into fraudulent ‘existence’. Extraordinary, yes, but as the Nazis said 
the bigger the lie the more will believe it. Cowan, however, wasn’t 
finished and he went on to identify what he called the real 
blockbuster in the paper. He quotes this section from a paper written 


by virologists and published by the CDC and then explains what it 
means: 


Therefore, we examined the capacity of SARS-CoV-2 to infect and replicate in several 
common primate and human cell lines, including human adenocarcinoma cells (A549), 
human liver cells (HUH 7.0), and human embryonic kidney cells (HEK-293T). In addition to 
Vero E6 and Vero CCL81 cells. ... Each cell line was inoculated at high multiplicity of 
infection and examined 24h post-infection. 


No CPE was observed in any of the cell lines except in Vero cells, which grew to greater than 
10 to the 7th power at 24 h post-infection. In contrast, HUH 7.0 and 293T showed only 
modest viral replication, and A549 cells were incompatible with SARS CoV-2 infection. 


Cowan explains that when virologists attempt to prove infection 
they have three possible ‘hosts’ or models on which they can test. 
The first was humans. Exposure to humans was generally not done 
for ethical reasons and has never been done with SARS-CoV-2 or any 
coronavirus. The second possible host was animals. Cowan said that 
forgetting for a moment that they never actually use purified virus 
when exposing animals they do use solutions that they claim contain 
the virus. Exposure to animals has been done with SARS-CoV-2 in 
an experiment involving mice and this is what they found: None of 
the wild (normal) mice got sick. In a group of genetically-modified 
mice, a statistically insignificant number lost weight and had slightly 
bristled fur, but they experienced nothing like the illness called 
‘Covid-19’. Cowan said the third method — the one they mostly rely 
on — is to inoculate solutions they say contain the virus onto a variety 
of tissue cultures. This process had never been shown to kill tissue 
unless the sample material was starved of nutrients and poisoned as 
part of the process. Yes, incredibly, in tissue experiments designed to 
show the ‘virus’ is responsible for killing the tissue they starve the 
tissue of nutrients and add toxic drugs including antibiotics and they 
do not have control studies to see if it’s the starvation and poisoning 
that is degrading the tissue rather than the ‘virus’ they allege to be in 
there somewhere. You want me to pinch you? Yep, I understand. 
Tom Cowan said this about the whole nonsensical farce as he 
explains what that quote from the CDC paper really means: 


The shocking thing about the above quote is that using their own methods, the virologists 
found that solutions containing SARS-CoV-2 — even in high amounts — were NOT, | repeat 
NOT, infective to any of the three human tissue cultures they tested. In plain English, this 
means they proved, on their terms, that this ‘new coronavirus’ is not infectious to human 
beings. It is ONLY infective to monkey kidney cells, and only then when you add two potent 
drugs (gentamicin and amphotericin), known to be toxic to kidneys, to the mix. 


My friends, read this again and again. These virologists, published by the CDC, performed a 
clear proof, on their terms, showing that the SARS-CoV-2 virus is harmless to human beings. 
That is the only possible conclusion, but, unfortunately, this result is not even mentioned in 
their conclusion. They simply say they can provide virus stocks cultured only on monkey Vero 
cells, thanks for coming. 


Cowan concluded: ‘If people really understood how this “science” 
was done, I would hope they would storm the gates and demand 
honesty, transparency and truth.’ Dr Michael Yeadon, former Vice 
President and Chief Scientific Adviser at drug giant Pfizer has been a 
vocal critic of the ‘Covid vaccine’ and its potential for multiple harm. 
He said in an interview in April, 2021, that ‘not one [vaccine] has the 
virus. He was asked why vaccines normally using a ‘dead’ version of 
a disease to activate the immune system were not used for ‘Covid’ 
and instead we had the synthetic methods of the ‘mRNA Covid 
vaccine’. Yeadon said that to do the former ‘you’d have to have some 
of [the virus] wouldn’t you?’ He added: “No-one’s got any — 
seriously.’ Yeadon said that surely they couldn’t have fooled the 
whole world for a year without having a virus, ‘but oddly enough 
ask around — no one’s got it’. He didn’t know why with all the ‘great 
labs’ around the world that the virus had not been isolated — ‘Maybe 
they’ve been too busy running bad PCR tests and vaccines that 
people don’t need.’ What is today called ‘science’ is not ‘science’ at 
all. Science is no longer what is, but whatever people can be 
manipulated to believe that it is. Real science has been hijacked by the 
Cult to dispense and produce the ‘expert scientists’ and contentions 
that suit the agenda of the Cult. How big-time this has happened 
with the ‘Covid’ hoax which is entirely based on fake science 
delivered by fake ‘scientists’ and fake ‘doctors’. The human-caused 
climate change hoax is also entirely based on fake science delivered 
by fake ‘scientists’ and fake ‘climate experts’. In both cases real 


scientists, climate experts and doctors have their views suppressed 
and deleted by the Cult-owned science establishment, media and 
Silicon Valley. This is the ‘science’ that politicians claim to be 
‘following’ and a common denominator of ‘Covid’ and climate are 
Cult psychopaths Bill Gates and his mate Klaus Schwab at the Gates- 
funded World Economic Forum. But, don’t worry, it’s all just a 
coincidence and absolutely nothing to worry about. 2zzzzzzz. 


What is a ‘virus’ REALLY? 


Dr Tom Cowan is one of many contesting the very existence of 
viruses let alone that they cause disease. This is understandable 
when there is no scientific evidence for a disease-causing ‘virus’. 
German virologist Dr Stefan Lanka won a landmark case in 2017 in 
the German Supreme Court over his contention that there is no such 
thing as a measles virus. He had offered a big prize for anyone who 
could prove there is and Lanka won his case when someone sought 
to claim the money. There is currently a prize of more than 225,000 
euros on offer from an Isolate Truth Fund for anyone who can prove 
the isolation of SARS-CoV-2 and its genetic substance. Lanka wrote 
in an article headed ‘The Misconception Called Virus’ that scientists 
think a ‘virus’ is causing tissue to become diseased and degraded 
when in fact it is the processes they are using which do that — not a 
‘virus’. Lanka has done an important job in making this point clear 
as Cowan did in his analysis of the CDC paper. Lanka says that all 
claims about viruses as disease-causing pathogens are wrong and 
based on ‘easily recognisable, understandable and verifiable 
misinterpretations.’ Scientists believed they were working with 
‘viruses’ in their laboratories when they were really working with 
‘typical particles of specific dying tissues or cells ...” Lanka said that 
the tissue decaying process claimed to be caused by a ‘virus’ still 
happens when no alleged ‘virus’ is involved. It’s the process that does 
the damage and not a ‘virus’. The genetic sample is deprived of 
nutrients, removed from its energy supply through removal from 
the body and then doused in toxic antibiotics to remove any bacteria. 
He confirms again that establishment scientists do not (pinch me) 


conduct control experiments to see if this is the case and if they did 
they would see the claims that ‘viruses’ are doing the damage is 
nonsense. He adds that during the measles ‘virus’ court case he 
commissioned an independent laboratory to perform just such a 
control experiment and the result was that the tissues and cells died 
in the exact same way as with alleged ‘infected’ material. This is 
supported by a gathering number of scientists, doctors and 
researchers who reject what is called ‘germ theory’ or the belief in 
the body being infected by contagious sources emitted by other 
people. Researchers Dawn Lester and David Parker take the same 
stance in their highly-detailed and sourced book What Really Makes 
You Ill — Why everything you thought you knew about disease is wrong 
which was recommended to me by a number of medical 
professionals genuinely seeking the truth. Lester and Parker say 
there is no provable scientific evidence to show that a ‘virus’ can be 
transmitted between people or people and animals or animals and 
people: 


The definition also claims that viruses are the cause of many diseases, as if this has been 
definitively proven. But this is not the case; there is no original scientific evidence that 
definitively demonstrates that any virus is the cause of any disease. The burden of proof for 
any theory lies with those who proposed it; but none of the existing documents provides 
‘proof’ that supports the claim that ‘viruses’ are pathogens. 


Dr Tom Cowan employs one of his clever analogies to describe the 
process by which a ‘virus’ is named as the culprit for a disease when 
what is called a ‘virus’ is only material released by cells detoxing 
themselves from infiltration by chemical or radiation poisoning. The 
tidal wave of technologically-generated radiation in the ‘smart’ 
modern world plus all the toxic food and drink are causing this to 
happen more than ever. Deluded ‘scientists’ misread this as a 
gathering impact of what they wrongly label ‘viruses’. 


Paper can infect houses 


Cowan said in an article for davidicke.com — with his tongue only 
mildly in his cheek — that he believed he had made a tremendous 


discovery that may revolutionise science. He had discovered that 
small bits of paper are alive, ‘well alive-ish’, can ‘infect’ houses, and 
then reproduce themselves inside the house. The result was that this 
explosion of growth in the paper inside the house causes the house 
to explode, blowing it to smithereens. His evidence for this new 
theory is that in the past months he had carefully examined many of 
the houses in his neighbourhood and found almost no scraps of 
paper on the lawns and surrounds of the house. There was an 
occasional stray label, but nothing more. Then he would return to 
these same houses a week or so later and with a few, not all of them, 
particularly the old and decrepit ones, he found to his shock and 
surprise they were littered with stray bits of paper. He knew then 
that the paper had infected these houses, made copies of itself, and 
blew up the house. A young boy on a bicycle at one of the sites told 
him he had seen a demolition crew using dynamite to explode the 
house the previous week, but Cowan dismissed this as the idle 
thoughts of silly boys because ‘I was on to something big’. He was 
on to how ‘scientists’ mistake genetic material in the detoxifying 
process for something they call a ‘virus’. Cowan said of his house 
and paper story: 


If this sounds crazy to you, it’s because it should. This scenario is obviously nuts. But consider 
this admittedly embellished, for effect, current viral theory that all scientists, medical doctors 
and virologists currently believe. 


He takes the example of the ‘novel SARS-Cov2’ virus to prove the 
point. First they take someone with an undefined illness called 
‘Covid-19’ and don’t even attempt to find any virus in their sputum. 
Never mind the scientists still describe how this ‘virus’, which they 
have not located attaches to a cell receptor, injects its genetic 
material, in ‘Covid’s’ case, RNA, into the cell. The RNA once inserted 
exploits the cell to reproduce itself and makes ‘thousands, nay 
millions, of copies of itself ... Then it emerges victorious to claim its 
next victim’: 


If you were to look in the scientific literature for proof, actual scientific proof, that uniform 
SARS-CoV2 viruses have been properly isolated from the sputum of a sick person, that actual 
spike proteins could be seen protruding from the virus (which has not been found), you would 
find that such evidence doesn’t exist. 


If you go looking in the published scientific literature for actual pictures, proof, that these 
spike proteins or any viral proteins are ever attached to any receptor embedded in any cell 
membrane, you would also find that no such evidence exists. If you were to look for a video 
or documented evidence of the intact virus injecting its genetic material into the body of the 
cell, reproducing itself and then emerging victorious by budding off the cell membrane, you 
would find that no such evidence exists. 


The closest thing you would find is electron micrograph pictures of cellular particles, possibly 
attached to cell debris, both of which to be seen were stained by heavy metals, a process that 
completely distorts their architecture within the living organism. This is like finding bits of 
paper stuck to the blown-up bricks, thereby proving the paper emerged by taking pieces of the 
bricks on its way out. 


The Enders baloney 


Cowan describes the ‘Covid’ story as being just as make-believe as 
his paper story and he charts back this fantasy to a Nobel Prize 
winner called John Enders (1897-1985), an American biomedical 
scientist who has been dubbed ‘The Father of Modern Vaccines’. 
Enders is claimed to have ‘discovered’ the process of the viral 
culture which ‘proved’ that a ‘virus’ caused measles. Cowan 
explains how Enders did this ‘by using the EXACT same procedure 
that has been followed by every virologist to find and characterize 
every new virus since 1954’. Enders took throat swabs from children 
with measles and immersed them in 2ml of milk. Penicillin (100u/ml) 
and the antibiotic streptomycin (50,g/ml) were added and the whole 
mix was centrifuged — rotated at high speed to separate large cellular 
debris from small particles and molecules as with milk and cream, 
for example. Cowan says that if the aim is to find little particles of 
genetic material (‘viruses’) in the snot from children with measles it 
would seem that the last thing you would do is mix the snot with 
other material — milk -that also has genetic material. ‘How are you 
ever going to know whether whatever you found came from the snot 
or the milk?’ He points out that streptomycin is a ‘nephrotoxic’ or 
poisonous-to-the-kidney drug. You will see the relevance of that 


shortly. Cowan says that it gets worse, much worse, when Enders 
describes the culture medium upon which the virus ‘grows’: ‘The 
culture medium consisted of bovine amniotic fluid (90%), beef 
embryo extract (5%), horse serum (5%), antibiotics and phenol red as 
an indicator of cell metabolism.’ Cowan asks incredulously: ‘Did he 
just say that the culture medium also contained fluids and tissues 
that are themselves rich sources of genetic material?’ The genetic 
cocktail, or ‘medium’, is inoculated onto tissue and cells from rhesus 
monkey kidney tissue. This is where the importance of streptomycin 
comes in and currently-used antimicrobials and other drugs that are 
poisonous to kidneys and used in ALL modern viral cultures (e.g. 
gentamicin, streptomycin, and amphotericin). Cowan asks: ‘How are 
you ever going to know from this witch’s brew where any genetic 
material comes from as we now have five different sources of rich 
genetic material in our mix?’ Remember, he says, that all genetic 
material, whether from monkey kidney tissues, bovine serum, milk, 
etc., is made from the exact same components. The same central 
question returns: ‘How are you possibly going to know that it was 
the virus that killed the kidney tissue and not the toxic antibiotic and 
starvation rations on which you are growing the tissue?’ John Enders 
answered the question himself — you can't: 


A second agent was obtained from an uninoculated culture of monkey kidney cells. The 
cytopathic changes [death of the cells] it induced in the unstained preparations could not be 
distinguished with confidence from the viruses isolated from measles. 


The death of the cells (‘cytopathic changes’) happened in exactly 
the same manner, whether they inoculated the kidney tissue with the 
measles snot or not, Cowan says. ‘This is evidence that the 
destruction of the tissue, the very proof of viral causation of illness, 
was not caused by anything in the snot because they saw the same 
destructive effect when the snot was not even used ... the cytopathic, 
ie., cell-killing, changes come from the process of the culture itself, 
not from any virus in any snot, period.’ Enders quotes in his 1957 
paper a virologist called Ruckle as reporting similar findings ‘and in 
addition has isolated an agent from monkey kidney tissue that is so 


far indistinguishable from human measles virus’. In other words, 
Cowan says, these particles called ‘measles viruses’ are simply and 
clearly breakdown products of the starved and poisoned tissue. For 
measles ‘virus’ see all ‘viruses’ including the so-called ‘Covid virus’. 
Enders, the ‘Father of Modern Vaccines’, also said: 


There is a potential risk in employing cultures of primate cells for the production of vaccines 
composed of attenuated virus, since the presence of other agents possibly latent in primate 
tissues cannot be definitely excluded by any known method. 


Cowan further quotes from a paper published in the journal 
Viruses in May, 2020, while the ‘Covid pandemic’ was well 
underway in the media if not in reality. ‘EVs’ here refers to particles 
of genetic debris from our own tissues, such as exosomes of which 
more in a moment: ‘The remarkable resemblance between EVs and 
viruses has caused quite a few problems in the studies focused on 
the analysis of EVs released during viral infections.’ Later the paper 
adds that to date a reliable method that can actually guarantee a 
complete separation (of EVs from viruses) DOES NOT EXIST. This 
was published at a time when a fairy tale ‘virus’ was claimed in total 
certainty to be causing a fairy tale ‘viral disease’ called ‘Covid-19’ —a 
fairy tale that was already well on the way to transforming human 
society in the image that the Cult has worked to achieve for so long. 
Cowan concludes his article: 


To summarize, there is no scientific evidence that pathogenic viruses exist. What we think of 
as ‘viruses’ are simply the normal breakdown products of dead and dying tissues and cells. 
When we are well, we make fewer of these particles; when we are starved, poisoned, 
suffocated by wearing masks, or afraid, we make more. 


There is no engineered virus circulating and making people sick. People in laboratories all 
over the world are making genetically modified products to make people sick. These are 
called vaccines. There is no virome, no ‘ecosystem’ of viruses, viruses are not 8%, 50% or 
100 % of our genetic material. These are all simply erroneous ideas based on the 
misconception called a virus. 


Whatis ‘Covid’? Load of bollocks 


The background described here by Cowan and Lanka was 
emphasised in the first video presentation that Isaw by Dr Andrew 
Kaufman when he asked whether the ‘Covid virus’ was in truth a 
natural defence mechanism of the body called ‘exosomes’. These are 
released by cells when in states of toxicity — see the same themes 
returning over and over. They are released ever more profusely as 
chemical and radiation toxicity increases and think of the potential 
effect therefore of 5G alone as its destructive frequencies infest the 
human energetic information field with a gathering pace (5G went 
online in Wuhan in 2019 as the ‘virus’ emerged). I’ll have more about 
this later. Exosomes transmit a warning to the rest of the body that 
‘Houston, we have a problem’. Kaufman presented images of 
exosomes and compared them with ‘Covid’ under an electron 
microscope and the similarity was remarkable. They both attach to 
the same cell receptors (claimed in the case of ‘Covid’), contain the 
same genetic material in the form of RNA or ribonucleic acid, and 
both are found in ‘viral cell cultures’ with damaged or dying cells. 
James Hildreth MD, President and Chief Executive Officer of the 
Meharry Medical College at Johns Hopkins, said: “The virus is fully 
an exosome in every sense of the word.’ Kaufman’s conclusion was 
that there is no ‘virus’: ‘This entire pandemic is a completely 
manufactured crisis ... there is no evidence of anyone dying from 
[this] illness.’ Dr Tom Cowan and Sally Fallon Morell, authors of The 
Contagion Myth, published a statement with Dr Kaufman in 
February, 2021, explaining why the ‘virus’ does not exist and you can 
read it that in full in the Appendix. 


‘Virus’ theory can be traced to the ‘cell theory’ in 1858 of German 
physician Rudolf Virchow (1821-1920) who contended that disease 
originates from a single cell infiltrated by a ‘virus’. Dr Stefan Lanka 
said that findings and insights with respect to the structure, function 
and central importance of tissues in the creation of life, which were 
already known in 1858, comprehensively refute the cell theory. 
Virchow ignored them. We have seen the part later played by John 
Enders in the 1950s and Lanka notes that infection theories were 
only established as a global dogma through the policies and 


eugenics of the Third Reich in Nazi Germany (creation of the same 
Sabbatian cult behind the ‘Covid’ hoax). Lanka said: ‘Before 1933, 
scientists dared to contradict this theory; after 1933, these critical 
scientists were silenced’. Dr Tom Cowan’s view is that ill-heath is 
caused by too much of something, too little of something, or 
toxification from chemicals and radiation — not contagion. We must 
also highlight as a major source of the ‘virus’ theology a man still 
called the ‘Father of Modern Virology’ — Thomas Milton Rivers 
(1888-1962). There is no way given the Cult’s long game policy that it 
was a coincidence for the ‘Father of Modern Virology’ to be director 
of the Rockefeller Institute for Medical Research from 1937 to 1956 
when he is credited with making the Rockefeller Institute a leader in 
‘viral research’. Cult Rockefellers were the force behind the creation 
of Big Pharma ‘medicine’, established the World Health 
Organisation in 1948, and have long and close associations with the 
Gates family that now runs the WHO during the pandemic hoax 
through mega-rich Cult gofer and psychopath Bill Gates. 

Only a Renegade Mind can see through all this bullshit by asking 
the questions that need to be answered, not taking ‘no’ or 
prevarication for an answer, and certainly not hiding from the truth 
in fear of speaking it. Renegade Minds have always changed the 
world for the better and they will change this one no matter how 
bleak it may currently appear to be. 


CHAPTER SIX 
Sequence of deceit 


If you tell the truth, you don’t have to remember anything 
Mark Twain 


gainst the background that I have laid out this far the sequence 

that took us from an invented ‘virus’ in Cult-owned China in 
late 2019 to the fascist transformation of human society can be seen 
and understood in a whole new context. 


We were told that a deadly disease had broken out in Wuhan and 
the world media began its campaign (coordinated by behavioural 
psychologists as we shall see) to terrify the population into 
unquestioning compliance. We were shown images of Chinese 
people collapsing in the street which never happened in the West 
with what was supposed to be the same condition. In the earliest 
days when alleged cases and deaths were few the fear register was 
hysterical in many areas of the media and this would expand into 
the common media narrative across the world. The real story was 
rather different, but we were never told that. The Chinese 
government, one of the Cult’s biggest centres of global operation, 
said they had discovered a new illness with flu-like and pneumonia- 
type symptoms in a city with such toxic air that it is overwhelmed 
with flu-like symptoms, pneumonia and respiratory disease. Chinese 
scientists said it was a new — ‘novel’ — coronavirus which they called 
Sars-Cov-2 and that it caused a disease they labelled ‘Covid-19’. 
There was no evidence for this and the ‘virus’ has never to this day 
been isolated, purified and its genetic code established from that. It 


was from the beginning a computer-generated fiction. Stories of 
Chinese whistleblowers saying the number of deaths was being 
supressed or that the ‘new disease’ was related to the Wuhan bio-lab 
misdirected mainstream and alternative media into cul-de-sacs to 
obscure the real truth — there was no ‘virus’. 


Chinese scientists took genetic material from the lung fluid of just 
a few people and said they had found a ‘new’ disease when this 
material had a wide range of content. There was no evidence for a 
‘virus’ for the very reasons explained in the last two chapters. The 
‘virus’ has never been shown to (a) exist and (b) cause any disease. 
People were diagnosed on symptoms that are so widespread in 
Wuhan and polluted China and with a PCR test that can’t detect 
infectious disease. On this farce the whole global scam was sold to 
the rest of the world which would also diagnose respiratory disease 
as ‘Covid-19’ from symptoms alone or with a PCR test not testing for 
a ‘virus’. Flu miraculously disappeared worldwide in 2020 and into 
2021 as it was redesignated ‘Covid-19’. It was really the same old flu 
with its ‘flu-like’ symptoms attributed to ‘flu-like’ ‘Covid-19’. At the 
same time with very few exceptions the Chinese response of 
draconian lockdown and fascism was the chosen weapon to respond 
across the West as recommended by the Cult-owned Tedros at the 
Cult-owned World Health Organization run by the Cult-owned 
Gates. All was going according to plan. Chinese scientists — 
everything in China is controlled by the Cult-owned government — 
compared their contaminated RNA lung-fluid material with other 
RNA sequences and said it appeared to be just under 80 percent 
identical to the SARS-CoV-1 ‘virus’ claimed to be the cause of the 
SARS (severe acute respiratory syndrome) ‘outbreak’ in 2003. They 
decreed that because of this the ‘new virus’ had to be related and 
they called it SARS-CoV-2. There are some serious problems with 
this assumption and assumption was all it was. Most ‘factual’ science 
turns out to be assumptions repeated into everyone-knows-that. A 
match of under 80-percent is meaningless. Dr Kaufman makes the 
point that there’s a 96 percent genetic correlation between humans 
and chimpanzees, but ‘no one would say our genetic material is part 


of the chimpanzee family’. Yet the Chinese authorities were claiming 
that a much lower percentage, less than 80 percent, proved the 
existence of a new ‘coronavirus’. For goodness sake human DNA is 
60 percent similar to a banana. 


You are feeling sleepy 

The entire ‘Covid’ hoax is a global Psyop, a psychological operation 
to program the human mind into believing and fearing a complete 
fantasy. A crucial aspect of this was what appeared to happen in Italy. 
It was all very well streaming out daily images of an alleged 
catastrophe in Wuhan, but to the Western mind it was still on the 
other side of the world in a very different culture and setting. A 
reaction of ‘this could happen to me and my family’ was still nothing 
like as intense enough for the mind-doctors. The Cult needed a 
Western example to push people over that edge and it chose Italy, 
one of its major global locations going back to the Roman Empire. 
An Italian ‘Covid’ crisis was manufactured in a particular area called 
Lombardy which just happens to be notorious for its toxic air and 
therefore respiratory disease. Wuhan, China, déja vu. An hysterical 
media told horror stories of Italians dying from ‘Covid’ in their 
droves and how Lombardy hospitals were being overrun by a tidal 
wave of desperately ill people needing treatment after being struck 
down by the ‘deadly virus’. Here was the psychological turning 
point the Cult had planned. Wow, if this is happening in Italy, the 
Western mind concluded, this indeed could happen to me and my 
family. Another point is that Italian authorities responded by 
following the Chinese blueprint so vehemently recommended by the 
Cult-owned World Health Organization. They imposed fascistic 
lockdowns on the whole country viciously policed with the help of 
surveillance drones sweeping through the streets seeking out anyone 
who escaped from mass house arrest. Livelihoods were destroyed 
and psychology unravelled in the way we have witnessed since in all 
lockdown countries. Crucial to the plan was that Italy responded in 
this way to set the precedent of suspending freedom and imposing 
fascism in a “Western liberal democracy’. I emphasised in an 


animated video explanation on davidicke.com posted in the summer 
of 2020 how important it was to the Cult to expand the Chinese 
lockdown model across the West. Without this, and the bare-faced lie 
that non-symptomatic people could still transmit a ‘disease’ they 
didn’t have, there was no way locking down the whole population, 
sick and not sick, could be pulled off. At just the right time and with 
no evidence Cult operatives and gofers claimed that people without 
symptoms could pass on the ‘disease’. In the name of protecting the 
‘vulnerable’ like elderly people, who lockdowns would kill by the 
tens of thousands, we had for the first time healthy people told to 
isolate as well as the sick. The great majority of people who tested 
positive had no symptoms because there was nothing wrong with 
them. It was just a trick made possible by a test not testing for the 
‘virus’. 

Months after my animated video the Gates-funded Professor Neil 
Ferguson at the Gates-funded Imperial College confirmed that I was 
right. He didn’t say it in those terms, naturally, but he did say it. 
Ferguson will enter the story shortly for his outrageously crazy 
‘computer models’ that led to Britain, the United States and many 
other countries following the Chinese and now Italian methods of 
response. Put another way, following the Cult script. Ferguson said 
that SAGE, the UK government's scientific advisory group which has 
controlled ‘Covid’ policy from the start, wanted to follow the 
Chinese lockdown model (while they all continued to work and be 
paid), but they wondered if they could possibly, in Ferguson’s 
words, ‘get away with it in Europe’. ‘Get away with it’? Who the hell 
do these moronic, arrogant people think they are? This appalling 
man Ferguson said that once Italy went into national lockdown they 
realised they, too, could mimic China: 


It’s a communist one-party state, we said. We couldn’t get away with it in Europe, we thought 
... and then Italy did it. And we realised we could. Behind this garbage from Ferguson is a 
simple fact: Doing the same as China in every country was the plan from the start and 
Ferguson’s ‘models’ would play a central role in achieving that. It’s just a coincidence, of 
course, and absolutely nothing to worry your little head about. 


Oops, sorry, our mistake 

Once the Italian segment of the Psyop had done the job it was 
designed to do a very different story emerged. Italian authorities 
revealed that 99 percent of those who had ‘died from Covid-19’ in 
Italy had one, two, three, or more ‘co-morbidities’ or illnesses and 
health problems that could have ended their life. The US Centers for 
Disease Control and Prevention (CDC) published a figure of 94 
percent for Americans dying of ‘Covid’ while having other serious 
medical conditions — on average two to three (some five or six) other 
potential causes of death. In terms of death from an unproven ‘virus’ 
I say it is 100 percent. The other one percent in Italy and six percent 
in the US would presumably have died from ‘Covid’s’ flu-like 
symptoms with a range of other possible causes in conjunction with 
a test not testing for the ‘virus’. Fox News reported that even more 
startling figures had emerged in one US county in which 410 of 422 
deaths attributed to ‘Covid-19 had other potentially deadly health 
conditions. The Italian National Health Institute said later that the 
average age of people dying with a ‘Covid-19% diagnosis in Italy was 
about 81. Ninety percent were over 70 with ten percent over 90. In 
terms of other reasons to die some 80 percent had two or more 
chronic diseases with half having three or more including 
cardiovascular problems, diabetes, respiratory problems and cancer. 
Why is the phantom ‘Covid-19’ said to kill overwhelmingly old 
people and hardly affect the young? Old people continually die of 
many causes and especially respiratory disease which you can re- 
diagnose ‘Covid-19’ while young people die in tiny numbers by 
comparison and rarely of respiratory disease. Old people ‘die of 
Covid’ because they die of other things that can be redesignated 
‘Covid’ and it really is that simple. 


Flu has flown 

The blueprint was in place. Get your illusory ‘cases’ from a test not 
testing for the ‘virus’ and redesignate other causes of death as 
‘Covid-19’. You have an instant ‘pandemic’ from something that is 
nothing more than a computer-generated fiction. With near-on a 


billion people having ‘flu-like’ symptoms every year the potential 
was limitless and we can see why flu quickly and apparently 
miraculously disappeared worldwide by being diagnosed ‘Covid-19’. 
The painfully bloody obvious was explained away by the childlike 
media in headlines like this in the UK ‘Independent’: ‘Not a single 
case of flu detected by Public Health England this year as Covid 
restrictions suppress virus’. I kid you not. The masking, social 
distancing and house arrest that did not make the ‘Covid virus’ 
disappear somehow did so with the “flu virus’. Even worse the 
article, by a bloke called Samuel Lovett, suggested that maybe the 
masking, sanitising and other ‘Covid’ measures should continue to 
keep the flu away. With a ridiculousness that disturbs your breathing 
(it’s ‘Covid-19’) the said Lovett wrote: ‘With widespread social 
distancing and mask-wearing measures in place throughout the UK, 
the usual routes of transmission for influenza have been blocked.’ 
He had absolutely no evidence to support that statement, but look at 
the consequences of him acknowledging the obvious. With flu not 
disappearing at all and only being relabelled “‘Covid-19 he would 
have to contemplate that “Covid’ was a hoax on a scale that is hard to 
imagine. You need guts and commitment to truth to even go there 
and that’s clearly something Samuel Lovett does not have in 
abundance. He would never have got it through the editors anyway. 


Tens of thousands die in the United States alone every winter from 
flu including many with pneumonia complications. CDC figures 
record 45 million Americans diagnosed with flu in 2017-2018 of 
which 61,000 died and some reports claim 80,000. Where was the 
same hysteria then that we have seen with ‘Covid-19’? Some 250,000 
Americans are admitted to hospital with pneumonia every year with 
about 50,000 cases proving fatal. About 65 million suffer respiratory 
disease every year and three million deaths makes this the third 
biggest cause of death worldwide. You only have to redesignate a 
portion of all these people ‘Covid-19’ and you have an instant global 
pandemic or the appearance of one. Why would doctors do this? They 
are told to do this and all but a few dare not refuse those who must 
be obeyed. Doctors in general are not researching their own 


knowledge and instead take it direct and unquestioned from the 
authorities that own them and their careers. The authorities say they 
must now diagnose these symptoms ‘Covid-19’ and not flu, or 
whatever, and they do it. Dark suits say put ‘Covid-19’ on death 
certificates no matter what the cause of death and the doctors do it. 
Renegade Minds don’t fall for the illusion that doctors and medical 
staff are all highly-intelligent, highly-principled, seekers of medical 
truth. Some are, but not the majority. They are repeaters, gofers, and 
yes sir, no sir, purveyors of what the system demands they purvey. 
The ‘Covid’ con is not merely confined to diseases of the lungs. 
Instructions to doctors to put ‘Covid-19’ on death certificates for 
anyone dying of anything within 28 days (or much more) of a 
positive test not testing for the ‘virus’ opened the floodgates. The 
term dying with ‘Covid’ and not of ‘Covid’ was coined to cover the 
truth. Whether it was a with or an of they were all added to the death 
numbers attributed to the ‘deadly virus’ compiled by national 
governments and globally by the Gates-funded Johns Hopkins 
operation in the United States that was so involved in those 
‘pandemic’ simulations. Fraudulent deaths were added to the ever- 
growing list of fraudulent ‘cases’ from false positives from a false 
test. No wonder Professor Walter Ricciardi, scientific advisor to the 
Italian minister of health, said after the Lombardy hysteria had done 
its job that ‘Covid’ death rates were due to Italy having the second 
oldest population in the world and to how hospitals record deaths: 


The way in which we code deaths in our country is very generous in the sense that all the 
people who die in hospitals with the coronavirus are deemed to be dying of the coronavirus. 
On re-evaluation by the National Institute of Health, only 12 per cent of death certificates 
have shown a direct causality from coronavirus, while 88 per cent of patients who have died 
have at least one pre-morbidity — many had two or three. 


This is extraordinary enough when you consider the propaganda 
campaign to use Italy to terrify the world, but how can they even say 
twelve percent were genuine when the ‘virus’ has not been shown to 
exist, its ‘code’ is a computer program, and diagnosis comes from a 
test not testing for it? As in China, and soon the world, ‘Covid-19’ in 


Italy was a redesignation of diagnosis. Lies and corruption were to 
become the real ‘pandemic’ fuelled by a pathetically-compliant 
medical system taking its orders from the tiny few at the top of their 
national hierarchy who answered to the World Health Organization 
which answers to Gates and the Cult. Doctors were told — ordered — 
to diagnose a particular set of symptoms ‘Covid-19 and put that on 
the death certificate for any cause of death if the patient had tested 
positive with a test not testing for the virus or had ‘Covid’ symptoms 
like the flu. The United States even introduced big financial 
incentives to manipulate the figures with hospitals receiving £4,600 
from the Medicare system for diagnosing someone with regular 
pneumonia, $13,000 if they made the diagnosis from the same 
symptoms ‘Covid-1% pneumonia, and $39, 000 if they put a ‘Covid’ 
diagnosed patient on a ventilator that would almost certainly kill 
them. A few — painfully and pathetically few — medical 
whistleblowers revealed (before Cult-owned YouTube deleted their 
videos) that they had been instructed to ‘let the patient crash’ and 
put them straight on a ventilator instead of going through a series of 
far less intrusive and dangerous methods as they would have done 
before the pandemic hoax began and the financial incentives kicked 
in. We are talking cold-blooded murder given that ventilators are so 
damaging to respiratory systems they are usually the last step before 
heaven awaits. Renegade Minds never fall for the belief that people 
in white coats are all angels of mercy and cannot be full-on 
psychopaths. I have explained in detail in The Answer how what I am 
describing here played out across the world coordinated by the 
World Health Organization through the medical hierarchies in 
almost every country. 


Medical scientist calls it 

Information about the non-existence of the ‘virus’ began to emerge 
for me in late March, 2020, and mushroomed after that. I was sent an 
email by Sir Julian Rose, a writer, researcher, and organic farming 
promotor, from a medical scientist friend of his in the United States. 
Even at that early stage in March the scientist was able to explain 


how the ‘Covid’ hoax was being manipulated. He said there were no 
reliable tests for a specific ‘Covid-19 virus’ and nor were there any 
reliable agencies or media outlets for reporting numbers of actual 
‘Covid-19’ cases. We have seen in the long period since then that he 
was absolutely right. ‘Every action and reaction to Covid-19 is based 
on totally flawed data and we simply cannot make accurate 
assessments,’ he said. Most people diagnosed with ‘Covid-19 were 
showing nothing more than cold and flu-like symptoms ‘because 
most coronavirus strains are nothing more than cold/flu-like 
symptoms’. We had farcical situations like an 84-year-old German 
man testing positive for ‘Covid-19’ and his nursing home ordered to 
quarantine only for him to be found to have a common cold. The 
scientist described back then why PCR tests and what he called the 
‘Mickey Mouse test kits’ were useless for what they were claimed to 
be identifying. “The idea these kits can isolate a specific virus like 
Covid-19 is nonsense,’ he said. Significantly, he pointed out that ‘if 
you want to create a totally false panic about a totally false pandemic 
— pick a coronavirus’. This is exactly what the Cult-owned Gates, 
World Economic Forum and Johns Hopkins University did with 
their Event 201 ‘simulation’ followed by their real-life simulation 
called the ‘pandemic’. The scientist said that all you had to do was 
select the sickest of people with respiratory-type diseases in a single 
location — ‘say Wuhan’ — and administer PCR tests to them. You can 
then claim that anyone showing ‘viral sequences’ similar to a 
coronavirus ‘which will inevitably be quite a few’ is suffering from a 
‘new’ disease: 


Since you already selected the sickest flu cases a fairly high proportion of your sample will go 
on to die. You can then say this ‘new’ virus has a CFR [case fatality rate] higher than the flu 
and use this to infuse more concern and do more tests which will of course produce more 
‘cases’, which expands the testing, which produces yet more ‘cases’ and so on and so on. 
Before long you have your ‘pandemic’, and all you have done is use a simple test kit trick to 
convert the worst flu and pneumonia cases into something new that doesn’t ACTUALLY EXIST 
[my emphasis]. 


He said that you then ‘just run the same scam in other countries’ 
and make sure to keep the fear message running high ‘so that people 


will feel panicky and less able to think critically’. The only problem 
to overcome was the fact there is no actual new deadly pathogen and 
only regular sick people. This meant that deaths from the ‘new 
deadly pathogen’ were going to be way too low for a real new 
deadly virus pandemic, but he said this could be overcome in the 
following ways — all of which would go on to happen: 


1. You can claim this is just the beginning and more deaths are imminent [you underpin this 
with fantasy ‘computer projections’]. Use this as an excuse to quarantine everyone and then 
claim the quarantine prevented the expected millions of dead. 


2. You can [say that people] ‘minimizing’ the dangers are irresponsible and bully them into 
not talking about numbers. 


3. You can talk crap about made up numbers hoping to blind people with pseudoscience. 


4. You can start testing well people (who, of course, will also likely have shreds of 
coronavirus [RNA] in them) and thus inflate your ‘case figures’ with ‘asymptomatic 
carriers’ (you will of course have to spin that to sound deadly even though any virologist 
knows the more symptom-less cases you have the less deadly is your pathogen). 


The scientist said that if you take these simple steps “you can have 
your own entirely manufactured pandemic up and running in 
weeks’. His analysis made so early in the hoax was brilliantly 
prophetic of what would actually unfold. Pulling all the information 
together in these recent chapters we have this is simple 1, 2, 3, of 
how you can delude virtually the entire human population into 
believing in a ‘virus’ that doesn’t exist: 


e A ‘Covid case’ is someone who tests positive with a test not 
testing for the ‘virus’. 


¢ A ‘Covid death’ is someone who dies of any cause within 28 days 
(or much longer) of testing positive with a test not testing for the 
‘virus. 


e Asymptomatic means there is nothing wrong with you, but they 
claim you can pass on what you don’t have to justify locking 


down (quarantining) healthy people in totality. 


The foundations of the hoax are that simple. A study involving ten 
million people in Wuhan, published in November, 2020, demolished 
the whole lie about those without symptoms passing on the ‘virus’. 
They found ‘300 asymptomatic cases’ and traced their contacts to 
find that not one of them was detected with the ‘virus’. 
‘Asymptomatic’ patients and their contacts were isolated for no less 
than two weeks and nothing changed. I know it’s all crap, but if you 
are going to claim that those without symptoms can transmit ‘the 
virus’ then you must produce evidence for that and they never have. 
Even World Health Organization official Dr Maria Van Kerkhove, 
head of the emerging diseases and zoonosis unit, said as early as 
June, 2020, that she doubted the validity of asymptomatic 
transmission. She said that ‘from the data we have, it still seems to 
be rare that an asymptomatic person actually transmits onward to a 
secondary individual’ and by ‘rare’ she meant that she couldn’t cite 
any case of asymptomatic transmission. 


The Ferguson factor 

The problem for the Cult as it headed into March, 2020, when the 
script had lockdown due to start, was that despite all the 
manipulation of the case and death figures they still did not have 
enough people alleged to have died from ‘Covid’ to justify mass 
house arrest. This was overcome in the way the scientist described: 
‘You can claim this is just the beginning and more deaths are 
imminent ... Use this as an excuse to quarantine everyone and then 
claim the quarantine prevented the expected millions of dead.’ Enter 
one Professor Neil Ferguson, the Gates-funded ‘epidemiologist’ at 
the Gates-funded Imperial College in London. Ferguson is Britain’s 
Christian Drosten in that he has a dire record of predicting health 
outcomes, but is still called upon to advise government on the next 
health outcome when another ‘crisis’ comes along. This may seem to 
be a strange and ridiculous thing to do. Why would you keep 
turning for policy guidance to people who have a history of being 


monumentally wrong? Ah, but it makes sense from the Cult point of 
view. These ‘experts’ keep on producing predictions that suit the 
Cult agenda for societal transformation and so it was with Neil 
Ferguson as he revealed his horrific (and clearly insane) computer 
model predictions that allowed lockdowns to be imposed in Britain, 
the United States and many other countries. Ferguson does not have 
even an A-level in biology and would appear to have no formal 
training in computer modelling, medicine or epidemiology, 
according to Derek Winton, an MSc in Computational Intelligence. 
He wrote an article somewhat aghast at what Ferguson did which 
included taking no account of respiratory disease ‘seasonality’ which 
means it is far worse in the winter months. Who would have thought 
that respiratory disease could be worse in the winter? Well, certainly 
not Ferguson. 


The massively China-connected Imperial College and its bizarre 
professor provided the excuse for the long-incubated Chinese model 
of human control to travel westward at lightning speed. Imperial 
College confirms on its website that it collaborates with the Chinese 
Research Institute; publishes more than 600 research papers every 
year with Chinese research institutions; has 225 Chinese staff; 2,600 
Chinese students — the biggest international group; 7,000 former 
students living in China which is the largest group outside the UK; 
and was selected for a tour by China’s President Xi Jinping during 
his state visit to the UK in 2015. The college takes major donations 
from China and describes itself as the UK’s number one university 
collaborator with Chinese research institutions. The China 
communist/fascist government did not appear phased by the woeful 
predictions of Ferguson and Imperial when during the lockdown 
that Ferguson induced the college signed a five-year collaboration 
deal with China tech giant Huawei that will have Huawei’s indoor 
5G network equipment installed at the college’s West London tech 
campus along with an ‘AI cloud platform’. The deal includes Chinese 
sponsorship of Imperial’s Venture Catalyst entrepreneurship 
competition. Imperial is an example of the enormous influence the 
Chinese government has within British and North American 


universities and research centres — and further afield. Up to 200 
academics from more than a dozen UK universities are being 
investigated on suspicion of ‘unintentionally’ helping the Chinese 
government build weapons of mass destruction by ‘transferring 
world-leading research in advanced military technology such as 
aircraft, missile designs and cyberweapons’. Similar scandals have 
broken in the United States, but it’s all a coincidence. Imperial 
College serves the agenda in many other ways including the 
promotion of every aspect of the United Nations Agenda 21/2030 
(the Great Reset) and produced computer models to show that 
human-caused ‘climate change’ is happening when in the real world 
it isn’t. Imperial College is driving the climate agenda as it drives the 
‘Covid’ agenda (both Cult hoaxes) while Patrick Vallance, the UK 
government’s Chief Scientific Adviser on ‘Covid’, was named Chief 
Scientific Adviser to the UN ‘climate change’ conference known as 
COP26 hosted by the government in Glasgow, Scotland. ‘Covid’ and 
‘climate’ are fundamentally connected. 


Professor Woetul 

From Imperial’s bosom came Neil Ferguson still advising 
government despite his previous disasters and it was announced 
early on that he and other key people like UK Chief Medical Adviser 
Chris Whitty had caught the ‘virus’ as the propaganda story was 
being sold. Somehow they managed to survive and we had Prime 
Minister Boris Johnson admitted to hospital with what was said to be 
a severe version of the ‘virus’ in this same period. His whole policy 
and demeanour changed when he returned to Downing Street. It’s a 
small world with these government advisors — especially in their 
communal connections to Gates — and Ferguson had partnered with 
Whitty to write a paper called ‘Infectious disease: Tough choices to 
reduce Ebola transmission’ which involved another scare-story that 
didn’t happen. Ferguson’s ‘models’ predicted that up to150, 000 
could die from ‘mad cow disease’, or BSE, and its version in sheep if 
it was transmitted to humans. BSE was not transmitted and instead 
triggered by an organophosphate pesticide used to treat a pest on 


cows. Fewer than 200 deaths followed from the human form. Models 
by Ferguson and his fellow incompetents led to the unnecessary 
culling of millions of pigs, cattle and sheep in the foot and mouth 
outbreak in 2001 which destroyed the lives and livelihoods of 
farmers and their families who had often spent decades building 
their herds and flocks. Vast numbers of these animals did not have 
foot and mouth and had no contact with the infection. Another 
‘expert’ behind the cull was Professor Roy Anderson, a computer 
modeller at Imperial College specialising in the epidemiology of 
human, not animal, disease. Anderson has served on the Bill and 
Melinda Gates Grand Challenges in Global Health advisory board 
and chairs another Gates-funded organisation. Gates is everywhere. 


In a precursor to the ‘Covid’ script Ferguson backed closing 
schools ‘for prolonged periods’ over the swine flu ‘pandemic’ in 2009 
and said it would affect a third of the world population if it 
continued to spread at the speed he claimed to be happening. His 
mates at Imperial College said much the same and a news report 
said: ‘One of the authors, the epidemiologist and disease modeller 
Neil Ferguson, who sits on the World Health Organisation’s 
emergency committee for the outbreak, said the virus had “full 
pandemic potential”.’ Professor Liam Donaldson, the Chris Whitty 
of his day as Chief Medical Officer, said the worst case could see 30 
percent of the British people infected by swine flu with 65,000 dying. 
Ferguson and Donaldson were indeed proved correct when at the 
end of the year the number of deaths attributed to swine flu was 392. 
The term ‘expert’ is rather liberally applied unfortunately, not least 
to complete idiots. Swine flu ‘projections’ were great for 
GlaxoSmithKline (GSK) as millions rolled in for its Pandemrix 
influenza vaccine which led to brain damage with children most 
affected. The British government (taxpayers) paid out more than £60 
million in compensation after GSK was given immunity from 
prosecution. Yet another ‘Covid’ déja vu. Swine flu was supposed to 
have broken out in Mexico, but Dr Wolfgang Wodarg, a German 
doctor, former member of parliament and critic of the ‘Covid’ hoax, 
observed ‘the spread of swine flu’ in Mexico City at the time. He 


said: ‘What we experienced in Mexico City was a very mild flu 
which did not kill more than usual — which killed even fewer people 
than usual.’ Hyping the fear against all the facts is not unique to 
‘Covid’ and has happened many times before. Ferguson is reported 
to have over-estimated the projected death toll of bird flu (H5N1) by 
some three million-fold, but bird flu vaccine makers again made a 
killing from the scare. This is some of the background to the Neil 
Ferguson who produced the perfectly-timed computer models in 
early 2020 predicting that half a million people would die in Britain 
without draconian lockdown and 2.2 million in the United States. 
Politicians panicked, people panicked, and lockdowns of alleged 
short duration were instigated to ‘flatten the curve’ of cases gleaned 
from a test not testing for the ‘virus’. I said at the time that the public 
could forget the ‘short duration’ bit. This was an agenda to destroy 
the livelihoods of the population and force them into mass control 
through dependency and there was going to be nothing ‘short’ about 
it. American researcher Daniel Horowitz described the consequences 
of the ‘models’ spewed out by Gates-funded Ferguson and Imperial 
College: 


What led our government and the governments of many other countries into panic was a 
single Imperial College of UK study, funded by global warming activists, that predicted 2.2 
million deaths if we didn’t lock down the country. In addition, the reported 8-9% death rate in 
Italy scared us into thinking there was some other mutation of this virus that they got, which 
might have come here. 


Together with the fact that we were finally testing and had the ability to actually report new 
cases, we thought we were headed for a death spiral. But again ... we can’t flatten a curve if 
we don’t know when the curve started. 


How about it never started? 


Giving them what they want 

An investigation by German news outlet Welt Am Sonntag (World on 
Sunday) revealed how in March, 2020, the German government 
gathered together ‘leading scientists from several research institutes 
and universities’ and ‘together, they were to produce a [modelling] 


paper that would serve as legitimization for further tough political 
measures’. The Cult agenda was justified by computer modelling not 
based on evidence or reality; it was specifically constructed to justify 
the Cult demand for lockdowns all over the world to destroy the 
independent livelihoods of the global population. All these 
modellers and everyone responsible for the ‘Covid’ hoax have a date 
with a trial like those in Nuremberg after World War Two when 
Nazis faced the consequences of their war crimes. These corrupt- 
beyond-belief ‘modellers’ wrote the paper according to government 
instructions and it said that that if lockdown measures were lifted 
then up to one million Germans would die from ‘Covid-19’ adding 
that some would die ‘agonizingly at home, gasping for breath’ 
unable to be treated by hospitals that couldn’t cope. All lies. No 
matter — it gave the Cult all that it wanted. What did long-time 
government ‘modeller’ Neil Ferguson say? If the UK and the United 
States didn’t lockdown half a million would die in Britain and 2.2 
million Americans. Anyone see a theme here? ‘Modellers’ are such a 
crucial part of the lockdown strategy that we should look into their 
background and follow the money. Researcher Rosemary Frei 
produced an excellent article headlined “The Modelling-paper 
Mafiosi’. She highlights a guy called John Edmunds, a British 
epidemiologist, and professor in the Faculty of Epidemiology and 
Population Health at the London School of Hygiene & Tropical 
Medicine. He studied at Imperial College. Edmunds is a member of 
government ‘Covid’ advisory bodies which have been dictating 
policy, the New and Emerging Respiratory Virus Threats Advisory 
Group (NERVTAG) and the Scientific Advisory Group for 
Emergencies (SAGE). 

Ferguson, another member of NERVTAG and SAGE, led the way 
with the original ‘virus’ and Edmunds has followed in the ‘variant’ 
stage and especially the so-called UK or Kent variant known as the 
‘Variant of Concern’ (VOC) B.1.1.7. He said in a co-written report for 
the Centre for Mathematical modelling of Infectious Diseases at the 
London School of Hygiene and Tropical Medicine, with input from 
the Centre’s ‘Covid-19’ Working Group, that there was ‘a realistic 


possibility that VOC B.1.1.7 is associated with an increased risk of 
death compared to non-VOC viruses’. Fear, fear, fear, get the 
vaccine, fear, fear, fear, get the vaccine. Rosemary Frei reveals that 
almost all the paper’s authors and members of the modelling centre’s 
‘Covid-19’ Working Group receive funding from the Bill and 
Melinda Gates Foundation and/or the associated Gates-funded 
Wellcome Trust. The paper was published by e-journal Medr xiv 
which only publishes papers not peer-reviewed and the journal was 
established by an organisation headed by Facebook’s Mark 
Zuckerberg and his missus. What a small world it is. Frei discovered 
that Edmunds is on the Scientific Advisory Board of the Coalition for 
Epidemic Preparedness Innovations (CEPI) which was established 
by the Bill and Melinda Gates Foundation, Klaus Schwab’s Davos 
World Economic Forum and Big Pharma giant Wellcome. CEPI was 
‘launched in Davos [in 2017] to develop vaccines to stop future 
epidemics’, according to its website. ‘Our mission is to accelerate the 
development of vaccines against emerging infectious diseases and 
enable equitable access to these vaccines for people during 
outbreaks.’ What kind people they are. Rosemary Frei reveals that 
Public Health England (PHE) director Susan Hopkins is an author of 
her organisation’s non-peer-reviewed reports on ‘new variants’. 
Hopkins is a professor of infectious diseases at London’s Imperial 
College which is gifted tens of millions of dollars a year by the Bill 
and Melinda Gates Foundation. Gates-funded modelling disaster 
Neil Ferguson also co-authors Public Health England reports and he 
spoke in December, 2020, about the potential danger of the B.1.1.7. 
‘UK variant’ promoted by Gates-funded modeller John Edmunds. 
When I come to the ‘Covid vaccines’ the ‘new variants’ will be 
shown for what they are — bollocks. 


Connections, connections 

All these people and modellers are lockdown-obsessed or, put 
another way, they demand what the Cult demands. Edmunds said in 
January, 2021, that to ease lockdowns too soon would be a disaster 
and they had to ‘vaccinate much, much, much more widely than the 


elderly’. Rosemary Frei highlights that Edmunds is married to 
Jeanne Pimenta who is described in a LinkedIn profile as director of 
epidemiology at GlaxoSmithKline (GSK) and she held shares in the 
company. Patrick Vallance, co-chair of SAGE and the government's 
Chief Scientific Adviser, is a former executive of GSK and has a 
deferred bonus of shares in the company worth £600,000. GSK has 
serious business connections with Bill Gates and is collaborating 
with mRNA-~’vaccine’ company CureVac to make ‘vaccines’ for the 
new variants that Edmunds is talking about. GSK is planning a 
‘Covid vaccine’ with drug giant Sanofi. Puppet Prime Minister Boris 
Johnson announced in the spring of 2021 that up to 60 million 
vaccine doses were to be made at the GSK facility at Barnard Castle 
in the English North East. Barnard Castle, with a population of just 
6,000, was famously visited in breach of lockdown rules in April, 
2020, by Johnson aide Dominic Cummings who said that he drove 
there ‘to test his eyesight’ before driving back to London. Cummings 
would be better advised to test his integrity — not that it would take 
long. The GSK facility had nothing to do with his visit then although 
I’m sure Patrick Vallance would have been happy to arrange an 
introduction and some tea and biscuits. Ruthless psychopath Gates 
has made yet another fortune from vaccines in collaboration with Big 
Pharma companies and gushes at the phenomenal profits to be made 
from vaccines — more than a 20-to-1 return as he told one 
interviewer. Gates also tweeted in December, 2019, with the 
foreknowledge of what was coming: ‘What's next for our 
foundation? I’m particularly excited about what the next year could 
mean for one of the best buys in global health: vaccines.’ 


Modeller John Edmunds is a big promotor of vaccines as all these 
people appear to be. He’s the dean of the London School of Hygiene 
& Tropical Medicine’s Faculty of Epidemiology and Population 
Health which is primarily funded by the Bill and Melinda Gates 
Foundation and the Gates-established and funded GAVI vaccine 
alliance which is the Gates vehicle to vaccinate the world. The 
organisation Doctors Without Borders has described GAVI as being 
‘aimed more at supporting drug-industry desires to promote new 


products than at finding the most efficient and sustainable means for 
fighting the diseases of poverty’. But then that’s why the psychopath 
Gates created it. John Edmunds said in a video that the London 
School of Hygiene & Tropical Medicine is involved in every aspect of 
vaccine development including large-scale clinical trials. He 
contends that mathematical modelling can show that vaccines 
protect individuals and society. That’s on the basis of shit in and shit 
out, I take it. Edmunds serves on the UK Vaccine Network as does 
Ferguson and the government's foremost “Covid’ adviser, the grim- 
faced, dark-eyed Chris Whitty. The Vaccine Network says it works 
‘to support the government to identify and shortlist targeted 
investment opportunities for the most promising vaccines and 
vaccine technologies that will help combat infectious diseases with 
epidemic potential, and to address structural issues related to the 
UK’s broader vaccine infrastructure’. Ferguson is acting Director of 
the Imperial College Vaccine Impact Modelling Consortium which 
has funding from the Bill and Melina Gates Foundation and the 
Gates-created GAVI ‘vaccine alliance’. Anyone wonder why these 
characters see vaccines as the answer to every problem? Ferguson is 
wildly enthusiastic in his support for GAVI’s campaign to vaccine 
children en masse in poor countries. You would expect someone like 
Gates who has constantly talked about the need to reduce the 
population to want to fund vaccines to keep more people alive. I’m 
sure that’s why he does it. The John Edmunds London School of 
Hygiene & Tropical Medicine (LSHTM) has a Vaccines 
Manufacturing Innovation Centre which develops, tests and 
commercialises vaccines. Rosemary Frei writes: 


The vaccines centre also performs affiliated activities like combating ‘vaccine hesitancy’. The 
latter includes the Vaccine Confidence Project. The project’s stated purpose is, among other 
things, ‘to provide analysis and guidance for early response and engagement with the public 
to ensure sustained confidence in vaccines and immunisation’. The Vaccine Confidence 
Project’s director is LSHTM professor Heidi Larson. For more than a decade she’s been 
researching how to combat vaccine hesitancy. 


How the bloody hell can blokes like John Edmunds and Neil 
Ferguson with those connections and financial ties model ‘virus’ case 


and death projections for the government and especially in a way 
that gives their paymasters like Gates exactly what they want? It’s 
insane, but this is what you find throughout the world. 


‘Covid' is not dangerous, oops, wait, yes itis 

Only days before Ferguson’s nightmare scenario made Jackboot 
Johnson take Britain into a China-style lockdown to save us from a 
deadly ‘virus’ the UK government website gov.uk was reporting 
something very different to Ferguson on a page of official 


government guidance for ‘high consequence infectious diseases 
(HCID)’. It said this about ‘Covid-19’: 


As of 19 March 2020, COVID-19 is no longer considered to be a high consequence infectious 
diseases (HCID) in the UK [my emphasis]. The 4 nations public health HCID group made an 
interim recommendation in January 2020 to classify COVID-19 as an HCID. This was based 
on consideration of the UK HCID criteria about the virus and the disease with information 
available during the early stages of the outbreak. 


Now that more is known about COVID-19, the public health bodies in the UK have reviewed 
the most up to date information about COVID-19 against the UK HCID criteria. They have 
determined that several features have now changed; in particular, more information is 
available about mortality rates (low overall), and there is now greater clinical awareness and a 
specific and sensitive laboratory test, the availability of which continues to increase. The 
Advisory Committee on Dangerous Pathogens (ACDP) is also of the opinion that COVID-19 
should no longer be classified as an HCID. 


Soon after the government had been exposed for downgrading the 
risk they upgraded it again and everyone was back to singing from 
the same Cult hymn book. Ferguson and his fellow Gates clones 
indicated that lockdowns and restrictions would have to continue 
until a Gates-funded vaccine was developed. Gates said the same 
because Ferguson and his like were repeating the Gates script which 
is the Cult script. ‘Flatten the curve’ became an ongoing nightmare of 
continuing lockdowns with periods in between of severe restrictions 
in pursuit of destroying independent incomes and had nothing to do 
with protecting health about which the Cult gives not a shit. Why 
wouldn't Ferguson be pushing a vaccine ‘solution’ when he’s owned 
by vaccine-obsessive Gates who makes a fortune from them and 


when Ferguson heads the Vaccine Impact Modelling Consortium at 
Imperial College funded by the Gates Foundation and GAVI, the 
‘vaccine alliance’, created by Gates as his personal vaccine 
promotion operation? To compound the human catastrophe that 
Ferguson’s ‘models’ did so much to create he was later exposed for 
breaking his own lockdown rules by having sexual liaisons with his 
married girlfriend Antonia Staats at his home while she was living at 
another location with her husband and children. Staats was a 
‘climate’ activist and senior campaigner at the Soros-funded Avaaz 
which I wouldn’t trust to tell me that grass is green. Ferguson had to 
resign as a government advisor over this hypocrisy in May, 2020, but 
after a period of quiet he was back being quoted by the ridiculous 
media on the need for more lockdowns and a vaccine rollout. Other 
government-advising ‘scientists’ from Imperial College’ held the fort 
in his absence and said lockdown could be indefinite until a vaccine 
was found. The Cult script was being sung by the payrolled choir. I 
said there was no intention of going back to ‘normal’ when the 
‘vaccine’ came because the ‘vaccine’ is part of a very different agenda 
that I will discuss in Human 2.0. Why would the Cult want to let the 
world go back to normal when destroying that normal forever was 
the whole point of what was happening? House arrest, closing 
businesses and schools through lockdown, (un)social distancing and 
masks all followed the Ferguson fantasy models. Again as I 
predicted (these people are so predictable) when the ‘vaccine’ 
arrived we were told that house arrest, lockdown, (un)social 
distancing and masks would still have to continue. I will deal with 
the masks in the next chapter because they are of fundamental 
importance. 


Where's the ‘pandemic? 

Any mildly in-depth assessment of the figures revealed what was 
really going on. Cult-funded and controlled organisations still have 
genuine people working within them such is the number involved. 
So it is with Genevieve Briand, assistant program director of the 
Applied Economics master’s degree program at Johns Hopkins 


University. She analysed the impact that ‘Covid-1% had on deaths 
from all causes in the United States using official data from the CDC 
for the period from early February to early September, 2020. She 
found that allegedly ‘Covid’ related-deaths exceeded those from 
heart disease which she found strange with heart disease always the 
biggest cause of fatalities. Her research became even more significant 
when she noted the sudden decline in 2020 of all non-’Covid’ deaths: 
‘This trend is completely contrary to the pattern observed in all 
previous years ... the total decrease in deaths by other causes almost 
exactly equals the increase in deaths by Covid-19.” This was such a 
game, set and match in terms of what was happening that Johns 
Hopkins University deleted the article on the grounds that it “was 
being used to support false and dangerous inaccuracies about the 
impact of the pandemic’. No — because it exposed the scam from 
official CDC figures and this was confirmed when those figures were 
published in January, 2021. Here we can see the effect of people 
dying from heart attacks, cancer, road accidents and gunshot 
wounds — anything — having ‘Covid-19’ on the death certificate along 
with those diagnosed from ‘symptoms’ who had even not tested 
positive with a test not testing for the ‘virus’. Iam not kidding with 
the gunshot wounds, by the way. Brenda Bock, coroner in Grand 
County, Colorado, revealed that two gunshot victims tested positive 
for the ‘virus’ within the previous 30 days and were therefore 
classified as ‘Covid deaths’. Bock said: “These two people had tested 
positive for Covid, but that’s not what killed them. A gunshot 
wound is what killed them.’ She said she had not even finished her 
investigation when the state listed the gunshot victims as deaths due 
to the ‘virus’. The death and case figures for ‘Covid-19’ are an 
absolute joke and yet they are repeated like parrots by the media, 
politicians and alleged medical ‘experts’. The official Cult narrative 
is the only show in town. 

Genevieve Briand found that deaths from all causes were not 
exceptional in 2020 compared with previous years and a Spanish 
magazine published figures that said the same about Spain which 
was a ‘Covid’ propaganda hotspot at one point. Discovery Salud, a 


health and medicine magazine, quoted government figures which 
showed how 17,000 fewer people died in Spain in 2020 than in 2019 
and more than 26,000 fewer than in 2018. The age-standardised 
mortality rate for England and Wales when age distribution is taken 
into account was significantly lower in 2020 than the 1970s, 80s and 
90s, and was only the ninth highest since 2000. Where is the 
‘pandemic’? 

Post mortems and autopsies virtually disappeared for ‘Covid’ 
deaths amid claims that ‘virus-infected’ bodily fluids posed a risk to 
those carrying out the autopsy. This was rejected by renowned 
German pathologist and forensic doctor Klaus Puschel who said that 
he and his staff had by then done 150 autopsies on ‘Covid’ patients 
with no problems at all. He said they were needed to know why 
some ‘Covid’ patients suffered blood clots and not severe respiratory 
infections. The ‘virus’ is, after all, called SARS or ‘severe acute 
respiratory syndrome’. I highlighted in the spring of 2020 this 
phenomenon and quoted New York intensive care doctor Cameron 
Kyle-Sidell who posted a soon deleted YouTube video to say that 
they had been told to prepare to treat an infectious disease called 
‘Covid-19’, but that was not what they were dealing with. Instead he 
likened the lung condition of the most severely ill patients to what 
you would expect with cabin depressurisation in a plane at 30,000 
feet or someone dropped on the top of Everest without oxygen or 
acclimatisation. I have never said this is not happening to a small 
minority of alleged ‘Covid’ patients — I am saying this is not caused 
by a phantom ‘contagious virus’. Indeed Kyle-Sidell said that 
‘Covid-19’ was not the disease they were told was coming their way. 
‘We are operating under a medical paradigm that is untrue,’ he said, 
and he believed they were treating the wrong disease: “These people 
are being slowly starved of oxygen.’ Patients would take off their 
oxygen masks in a state of fear and stress and while they were blue 
in the face on the brink of death. They did not look like patients 
dying of pneumonia. You can see why they don’t want autopsies 
when their virus doesn’t exist and there is another condition in some 
people that they don’t wish to be uncovered. I should add here that 


the 5G system of millimetre waves was being rapidly introduced 
around the world in 2020 and even more so now as they fire 5G at 
the Earth from satellites. At 60 gigahertz within the 5G range that 
frequency interacts with the oxygen molecule and stops people 
breathing in sufficient oxygen to be absorbed into the bloodstream. 
They are installing 5G in schools and hospitals. The world is not 
mad or anything. 5G can cause major changes to the lungs and blood 
as I detail in The Answer and these consequences are labelled ‘Covid- 
19’, the alleged symptoms of which can be caused by 5G and other 
electromagnetic frequencies as cells respond to radiation poisoning. 


The ‘Covid death’ scam 

Dr Scott Jensen, a Minnesota state senator and medical doctor, 
exposed ‘Covid’ Medicare payment incentives to hospitals and death 
certificate manipulation. He said he was sent a seven-page document 
by the US Department of Health ‘coaching’ him on how to fill out 
death certificates which had never happened before. The document 
said that he didn’t need to have a laboratory test for ‘Covid-19’ to 
put that on the death certificate and that shocked him when death 
certificates are supposed to be about facts. Jensen described how 
doctors had been ‘encouraged, if not pressured’ to make a diagnosis 
of ‘Covid-19’ if they thought it was probable or ‘presumed’. No 
positive test was necessary — not that this would have mattered 
anyway. He said doctors were told to diagnose ‘Covid’ by symptoms 
when these were the same as colds, allergies, other respiratory 
problems, and certainly with influenza which ‘disappeared’ in the 
‘Covid’ era. A common sniffle was enough to get the dreaded 
verdict. Ontario authorities decreed that a single care home resident 
with one symptom from a long list must lead to the isolation of the 
entire home. Other courageous doctors like Jensen made the same 
point about death figure manipulation and how deaths by other 
causes were falling while ‘Covid-19 deaths’ were rising at the same 
rate due to re-diagnosis. Their videos rarely survive long on 
YouTube with its Cult-supporting algorithms courtesy of CEO Susan 
Wojcicki and her bosses at Google. Figure-tampering was so glaring 


and ubiquitous that even officials were letting it slip or outright 
saying it. UK chief scientific adviser Patrick Vallance said on one 
occasion that ‘Covid’ on the death certificate doesn’t mean “Covid’ 
was the cause of death (so why the hell is it there?) and we had the 
rare sight of a BBC reporter telling the truth when she said: 
‘Someone could be successfully treated for Covid, in say April, 
discharged, and then in June, get run over by a bus and die ... That 
person would still be counted as a Covid death in England.’ Yet the 
BBC and the rest of the world media went on repeating the case and 
death figures as if they were real. Illinois Public Health Director Dr 
Ngozi Ezike revealed the deceit while her bosses must have been 
clenching their buttocks: 


If you were in a hospice and given a few weeks to live and you were then found to have 
Covid that would be counted as a Covid death. [There might be] a clear alternate cause, but it 
is still listed as a Covid death. So everyone listed as a Covid death doesn’t mean that was the 
cause of the death, but that they had Covid at the time of death. 


Yes, a ‘Covid virus’ never shown to exist and tested for with a test 
not testing for the ‘virus’. In the first period of the pandemic hoax 
through the spring of 2020 the process began of designating almost 
everything a ‘Covid’ death and this has continued ever since. I sat in 
a restaurant one night listening to a loud conversation on the next 
table where a family was discussing in bewilderment how a relative 
who had no symptoms of ‘Covid’, and had died of a long-term 
problem, could have been diagnosed a death by the ‘virus’. I could 
understand their bewilderment. If they read this book they will 
know why this medical fraud has been perpetrated the world over. 


Some media truth shock 

The media ignored the evidence of death certificate fraud until 
eventually one columnist did speak out when she saw it first-hand. 
Bel Mooney is a long-time national newspaper journalist in Britain 
currently working for the Daily Mail. Her article on February 19th, 
2021, carried this headline: ‘My dad Ted passed three Covid tests 


and died of a chronic illness yet he’s officially one of Britain’s 120,000 
victims of the virus and is far from alone ... so how many more are 
there?’ She told how her 99-year-old father was in a care home with 
a long-standing chronic obstructive pulmonary disease and vascular 
dementia. Maybe, but he was still aware enough to tell her from the 
start that there was no ‘virus’ and he refused the ‘vaccine’ for that 
reason. His death was not unexpected given his chronic health 
problems and Mooney said she was shocked to find that “‘Covid-19’ 
was declared the cause of death on his death certificate. She said this 
was a ‘bizarre and unacceptable untruth’ for a man with long-time 
health problems who had tested negative twice at the home for the 
‘virus’. I was also shocked by this story although not by what she 
said. I had been highlighting the death certificate manipulation for 
ten months. It was the confirmation that a professional full-time 
journalist only realised this was going on when it affected her 
directly and neither did she know that whether her dad tested 
positive or negative was irrelevant with the test not testing for the 
‘virus’. Where had she been? She said she did not believe in 
‘conspiracy theories’ without knowing I’m sure that this and 
‘conspiracy theorists’ were terms put into widespread circulation by 
the CIA in the 1960s to discredit those who did not accept the 
ridiculous official story of the Kennedy assassination. A blanket 
statement of ‘I don’t believe in conspiracy theories’ is always bizarre. 
The dictionary definition of the term alone means the world is 
drowning in conspiracies. What she said was even more daft when 
her dad had just been affected by the ‘Covid’ conspiracy. Why else 
does she think that ‘Covid-19’ was going on the death certificates of 
people who died of something else? 

To be fair once she saw from personal experience what was 
happening she didn’t mince words. Mooney was called by the care 
home on the morning of February 9th to be told her father had died 
in his sleep. When she asked for the official cause of death what 
came back was ‘Covid-19’. Mooney challenged this and was told 
there had been deaths from Covid on the dementia floor (confirmed 
by a test not testing for the ‘virus’) so they considered it ‘reasonable 


to assume’. ‘But doctor,’ Mooney rightly protested, ‘an assumption 
isn’t a diagnosis.’ She said she didn’t blame the perfectly decent and 
sympathetic doctor — ‘he was just doing his job’. Sorry, but that’s 
bullshit. He wasn’t doing his job at all. He was putting a false cause of 
death on the death certificate and that is a criminal offence for which 
he should be brought to account and the same with the millions of 
doctors worldwide who have done the same. They were not doing 
their job they were following orders and that must not wash at new 
Nuremberg trials any more than it did at the first ones. Mooney’s 
doctor was ‘assuming’ (presuming) as he was told to, but ‘just 
following orders’ makes no difference to his actions. A doctor’s job is 
to serve the patient and the truth, not follow orders, but that’s what 
they have done all over the world and played a central part in 
making the ‘Covid’ hoax possible with all its catastrophic 
consequences for humanity. Shame on them and they must answer 
for their actions. Mooney said her disquiet worsened when she 
registered her father’s death by telephone and was told by the 
registrar there had been very many other cases like hers where ‘the 
deceased’ had not tested positive for ‘Covid’ yet it was recorded as 
the cause of death. The test may not matter, but those involved at 
their level think it matters and it shows a callous disregard for 
accurate diagnosis. The pressure to do this is coming from the top of 
the national ‘health’ pyramids which in turn obey the World Health 
Organization which obeys Gates and the Cult. Mooney said the 
registrar agreed that this must distort the national figures adding 
that ‘the strangest thing is that every winter we record countless 
deaths from flu, and this winter there have been none. Not one!’ She 
asked if the registrar thought deaths from flu were being 
misdiagnosed and lumped together with ‘Covid’ deaths. The answer 
was a ‘puzzled yes’. Mooney said that the funeral director said the 
same about ‘Covid’ deaths which had nothing to do with ‘Covid’. 
They had lost count of the number of families upset by this and 
other funeral companies in different countries have had the same 
experience. Mooney wrote: 


The nightly shroud-waving and shocking close-ups of pain imposed on us by the TV news 
bewildered and terrified the population into eager compliance with lockdowns. We were 
invited to ‘save the NHS’ and to grieve for strangers — the real-life loved ones behind those 
shocking death counts. Why would the public imagine what | now fear, namely that the way 
Covid-19 death statistics are compiled might make the numbers seem greater than they are? 


Oh, just a little bit — like 100 percent. 


Mooney asked why a country would wish to skew its mortality 
figures by wrongly certifying deaths? What had been going on? 
Well, if you don’t believe in conspiracies you will never find the 
answer which is that it’s a conspiracy. She did, however, describe 
what she had discovered as a ‘national scandal’. In reality it’s a 
global scandal and happening everywhere. Pillars of this conspiracy 
were all put into place before the button was pressed with the 
Drosten PCR protocol and high amplifications to produce the cases 
and death certificate changes to secure illusory ‘Covid’ deaths. 
Mooney notes that normally two doctors were needed to certify a 
death, with one having to know the patient, and how the rules were 
changed in the spring of 2020 to allow one doctor to do this. In the 
same period “Covid deaths’ were decreed to be all cases where 
Covid-19 was put on the death certificate even without a positive test 
or any symptoms. Mooney asked: ‘How many of the 30,851 (as of 
January 15) care home resident deaths with Covid-19 on the 
certificate (32.4 per cent of all deaths so far) were based on an 
assumption, like that of my father? And what has that done to our 
national psyche?’ All of them is the answer to the first question and it 
has devastated and dismantled the national psyche, actually the 
global psyche, on a colossal scale. In the UK case and death data is 
compiled by organisations like Public Health England (PHE) and the 
Office for National Statistics (ONS). Mooney highlights the insane 
policy of counting a death from any cause as ‘Covid-19% if this 
happens within 28 days of a positive test (with a test not testing for 
the ‘virus’) and she points out that ONS statistics reflect deaths 
‘involving Covid’ ‘or due to Covid’ which meant in practice any 


death where ‘Covid-19’ was mentioned on the death certificate. She 
described the consequences of this fraud: 


Most people will accept the narrative they are fed, so panicky governments here and in 
Europe witnessed the harsh measures enacted in totalitarian China and jumped into 
lockdown. Headlines about Covid deaths tolled like the knell that would bring doomsday to 
us all. Fear stalked our empty streets. Politicians parroted the frankly ridiculous aim of ‘zero 
Covid’ and shut down the economy, while most British people agreed that lockdown was 
essential and (astonishingly to me, as a patriotic Brit) even wanted more restrictions. 


For what? Lies on death certificates? Never mind the grim toll of lives ruined, suicides, schools 
closed, rising inequality, depression, cancelled hospital treatments, cancer patients in a torture 
of waiting, poverty, economic devastation, loneliness, families kept apart, and so on. How 
many lives have been lost as a direct result of lockdown? 


She said that we could join in a national chorus of shock and horror 
at reaching the 120,000 death toll which was surely certain to have 
been totally skewed all along, but what about the human cost of 
lockdown justified by these ‘death figures’? The British Medical 
Journal had reported a 1,493 percent increase in cases of children 
taken to Great Ormond Street Hospital with abusive head injuries 
alone and then there was the effect on families: 


Perhaps the most shocking thing about all this is that families have been kept apart — and 
obeyed the most irrational, changing rules at the whim of government — because they 
believed in the statistics. They succumbed to fear, which his generation rejected in that war 
fought for freedom. Dad (God rest his soul) would be angry. And so am I. 


Another theme to watch is that in the winter months when there 
are more deaths from all causes they focus on ‘Covid’ deaths and in 
the summer when the British Lung Foundation says respiratory 
disease plummets by 80 percent they rage on about ‘cases’. Either 
way fascism on population is always the answer. 


Nazi eugenics in the 21st century 

Elderly people in care homes have been isolated from their families 
month after lonely month with no contact with relatives and 
grandchildren who were banned from seeing them. We were told 


that lockdown fascism was to ‘protect the vulnerable’ like elderly 
people. At the same time Do Not Resuscitate (DNR) orders were 
placed on their medical files so that if they needed resuscitation it 
wasn’t done and “Covid-19’ went on their death certificates. Old 
people were not being ‘protected’ they were being culled — 
murdered in truth. DNR orders were being decreed for disabled and 
young people with learning difficulties or psychological problems. 
The UK Care Quality Commission, a non-departmental body of the 
Department of Health and Social Care, found that 34 percent of 
those working in health and social care were pressured into placing 
‘do not attempt cardiopulmonary resuscitation’ orders on ‘Covid’ 
patients who suffered from disabilities and learning difficulties 
without involving the patient or their families in the decision. UK 
judges ruled that an elderly woman with dementia should have the 
DNA-manipulating ‘Covid vaccine’ against her son’s wishes and that 
aman with severe learning difficulties should have the jab despite 
his family’s objections. Never mind that many had already died. The 
judiciary always supports doctors and government in fascist 
dictatorships. They wouldn’t dare do otherwise. A horrific video was 
posted showing fascist officers from Los Angeles police forcibly 
giving the ‘Covid’ shot to women with special needs who were 
screaming that they didn’t want it. The same fascists are seen giving 
the jab to a sleeping elderly woman in a care home. This is straight 
out of the Nazi playbook. Hitler’s Nazis committed mass murder of 
the mentally ill and physically disabled throughout Germany and 
occupied territories in the programme that became known as Aktion 
T4, or just T4. Sabbatian-controlled Hitler and his grotesque crazies 
set out to kill those they considered useless and unnecessary. The 
Reich Committee for the Scientific Registering of Hereditary and 
Congenital Illnesses registered the births of babies identified by 
physicians to have ‘defects’. By 1941 alone more than 5,000 children 
were murdered by the state and it is estimated that in total the 
number of innocent people killed in Aktion T4 was between 275,000 
and 300,000. Parents were told their children had been sent away for 
‘special treatment’ never to return. It is rather pathetic to see claims 
about plans for new extermination camps being dismissed today 


when the same force behind current events did precisely that 80 
years ago. Margaret Sanger was a Cult operative who used ‘birth 
control’ to sanitise her programme of eugenics. Organisations she 
founded became what is now Planned Parenthood. Sanger proposed 
that ‘the whole dysgenic population would have its choice of 
segregation or sterilization’. These included epileptics, ‘feeble- 
minded’, and prostitutes. Sanger opposed charity because it 
perpetuated ‘human waste’. She reveals the Cult mentality and if 
anyone thinks that extermination camps are a ‘conspiracy theory’ 
their naivety is touching if breathtakingly stupid. 

If you don’t believe that doctors can act with callous disregard for 
their patients it is worth considering that doctors and medical staff 
agreed to put government-decreed DNR orders on medical files and 
do nothing when resuscitation is called for. I don’t know what you 
call such people in your house. In mine they are Nazis from the Josef 
Mengele School of Medicine. Phenomenal numbers of old people 
have died worldwide from the effects of lockdown, depression, lack 
of treatment, the ‘vaccine’ (more later) and losing the will to live. A 
common response at the start of the manufactured pandemic was to 
remove old people from hospital beds and transfer them to nursing 
homes. The decision would result in a mass cull of elderly people in 
those homes through lack of treatment — not ‘Covid’. Care home 
whistleblowers have told how once the ‘Covid’ era began doctors 
would not come to their homes to treat patients and they were 
begging for drugs like antibiotics that often never came. The most 
infamous example was ordered by New York governor Andrew 
Cuomo, brother of a moronic CNN host, who amazingly was given 
an Emmy Award for his handling of the ‘Covid crisis’ by the 
ridiculous Wokers that hand them out. Just how ridiculous could be 
seen in February, 2021, when a Department of Justice and FBI 
investigation began into how thousands of old people in New York 
died in nursing homes after being discharged from hospital to make 
way for ‘Covid’ patients on Cuomo’s say-so — and how he and his 
staff covered up these facts. This couldn’t have happened to a nicer 
psychopath. Even then there was a ‘Covid’ spin. Reports said that 


thousands of old people who tested positive for “Covid’ in hospital 
were transferred to nursing homes to both die of ‘Covid’ and 
transmit it to others. No — they were in hospital because they were ill 
and the fact that they tested positive with a test not testing for the 
‘virus’ is irrelevant. They were ill often with respiratory diseases 
ubiquitous in old people near the end of their lives. Their transfer 
out of hospital meant that their treatment stopped and many would 
go on to die. 


They're old. Who gives a damn? 


I have exposed in the books for decades the Cult plan to cull the 
world’s old people and even to introduce at some point what they 
call a ‘demise pill’ which at a certain age everyone would take and 
be out of here by law. In March, 2021, Spain legalised euthanasia and 
assisted suicide following the Netherlands, Belgium, Luxembourg 
and Canada on the Tiptoe to the demise pill. Treatment of old people 
by many ‘care’ homes has been a disgrace in the ‘Covid’ era. There 
are many, many, caring staff — I know some. There have, however, 
been legions of stories about callous treatment of old people and 
their families. Police were called when families came to take their 
loved ones home in the light of isolation that was killing them. They 
became prisoners of the state. Care home residents in insane, fascist 
Ontario, Canada, were not allowed to leave their room once the 
‘Covid’ hoax began. UK staff have even wheeled elderly people 
away from windows where family members were talking with them. 
Oriana Criscuolo from Stockport in the English North West dropped 
off some things for her 80-year-old father who has Parkinson’s 
disease and dementia and she wanted to wave to him through a 
ground-floor window. She was told that was ‘illegal’. When she went 
anyway they closed the curtains in the middle of the day. Oriana 
said: 


It’s just unbelievable. | cannot understand how care home staff — people who are being paid 
to care — have become so uncaring. Their behaviour is inhumane and cruel. It’s beyond belief. 


She was right and this was not a one-off. What a way to end your life 
in such loveless circumstances. UK registered nurse Nicky Millen, a 
proper old school nurse for 40 years, said that when she started her 
career care was based on dignity, choice, compassion and empathy. 
Now she said ‘the things that are important to me have gone out of 
the window.’ She was appalled that people were dying without their 
loved ones and saying goodbye on iPads. Nicky described how a 
distressed 89-year-old lady stroked her face and asked her ‘how 
many paracetamol would it take to finish me off’. Life was no longer 
worth living while not seeing her family. Nicky said she was 
humiliated in front of the ward staff and patients for letting the lady 
stroke her face and giving her a cuddle. Such is the dehumanisation 
that the ‘Covid’ hoax has brought to the surface. Nicky worked in 
care homes where patients told her they were being held prisoner. ‘I 
want to live until I die’, one said to her. ‘I had a lady in tears because 
she hadn’t seen her great-grandson.’ Nicky was compassionate old 
school meeting psychopathic New Normal. She also said she had 
worked on a “Covid’ ward with no ‘Covid’ patients. Jewish writer 
Shai Held wrote an article in March, 2020, which was headlined “The 
Staggering, Heartless Cruelty Toward the Elderly’. What he 
described was happening from the earliest days of lockdown. He 
said ‘the elderly’ were considered a group and not unique 
individuals (the way of the Woke). Shai Held said: 


Notice how the all-too-familiar rhetoric of dehumanization works: ‘The elderly’ are bunched 
together as a faceless mass, all of them considered culprits and thus effectively deserving of 
the suffering the pandemic will inflict upon them. Lost entirely is the fact that the elderly are 
individual human beings, each with a distinctive face and voice, each with hopes and 
dreams, memories and regrets, friendships and marriages, loves lost and loves sustained. 


‘The elderly’ have become another dehumanised group for which 
anything goes and for many that has resulted in cold disregard for 
their rights and their life. The distinctive face that Held talks about is 
designed to be deleted by masks until everyone is part of a faceless 
mass. 


‘War-zone’ hospitals myth 

Again and again medical professionals have told me what was really 
going on and how hospitals ‘overrun like war zones’ according to 
the media were virtually empty. The mantra from medical 
whistleblowers was please don’t use my name or my career is Over. 
Citizen journalists around the world sneaked into hospitals to film 
evidence exposing the ‘war-zone’ lie. They really were largely empty 
with closed wards and operating theatres. I met a hospital worker in 
my town on the Isle of Wight during the first lockdown in 2020 who 
said the only island hospital had never been so quiet. Lockdown was 
justified by the psychopaths to stop hospitals being overrun. At the 
same time that the island hospital was near-empty the military 
arrived here to provide extra beds. It was all propaganda to ramp up 
the fear to ensure compliance with fascism as were never-used 
temporary hospitals with thousands of beds known as Nightingales 
and never-used make-shift mortuaries opened by the criminal UK 
government. A man who helped to install those extra island beds 
attributed to the army said they were never used and the hospital 
was empty. Doctors and nurses ‘stood around talking or on their 
phones, wandering down to us to see what we were doing’. There 
were no masks or social distancing. He accused the useless local 
island paper, the County Press, of ‘pumping the fear as if our hospital 
was overrun and we only have one so it should have been’. He 
described ambulances parked up with crews outside in deck chairs. 
When his brother called an ambulance he was told there was a two- 
hour backlog which he called ‘bullshit’. An old lady on the island fell 
‘and was in a bad way’, but a caller who rang for an ambulance was 
told the situation wasn’t urgent enough. Ambulance stations were 
working under capacity while people would hear ambulances with 
sirens blaring driving through the streets. When those living near 
the stations realised what was going on they would follow them as 
they left, circulated around an urban area with the sirens going, and 
then came back without stopping. All this was to increase levels of 
fear and the same goes for the ‘ventilator shortage crisis’ that cost 
tens of millions for hastily produced ventilators never to be used. 


Ambulance crews that agreed to be exploited in this way for fear 
propaganda might find themselves a mirror. I wish them well with 
that. Empty hospitals were the obvious consequence of treatment 
and diagnoses of non-’Covid’ conditions cancelled and those 
involved handed a death sentence. People have been dying at home 
from undiagnosed and untreated cancer, heart disease and other life- 
threatening conditions to allow empty hospitals to deal with a 
‘pandemic’ that wasn’t happening. 


‘War-zones’ have been laying off nursing staff, even doctors where 
they can. There was no work for them. Lockdown was justified by 
saving lives and protecting the vulnerable they were actually killing 
with DNR orders and preventing empty hospitals being ‘overrun’. In 
Britain the mantra of stay at home to ‘save the NHS’ was everywhere 
and across the world the same story was being sold when it was all 
lies. Two California doctors, Dan Erickson and Artin Massihi at 
Accelerated Urgent Care in Bakersfield, held a news conference in 
April, 2020, to say that intensive care units in California were ‘empty, 
essentially’, with hospitals shutting floors, not treating patients and 
laying off doctors. The California health system was working at 
minimum capacity ‘getting rid of doctors because we just don’t have 
the volume’. They said that people with conditions such as heart 
disease and cancer were not coming to hospital out of fear of “Covid- 
19’. Their video was deleted by Susan Wojcicki’s Cult-owned 
YouTube after reaching five million views. Florida governor Ron 
Desantis, who rejected the severe lockdowns of other states and is 
being targeted for doing so, said that in March, 2020, every US 
governor was given models claiming they would run out of hospital 
beds in days. That was never going to happen and the ‘modellers’ 
knew it. Deceit can be found at every level of the system. Urgent 
children’s operations were cancelled including fracture repairs and 
biopsies to spot cancer. Eric Nicholls, a consultant paediatrician, said 
‘this is obviously concerning and we need to return to normal 
operating and to increase capacity as soon as possible’. Psychopaths 


in power were rather less concerned because they are psychopaths. 
Deletion of urgent care and diagnosis has been happening all over 
the world and how many kids and others have died as a result of the 
actions of these cold and heartless lunatics dictating ‘health’ policy? 
The number must be stratospheric. Richard Sullivan, professor of 
cancer and global health at King’s College London, said people 
feared “Covid’ more than cancer such was the campaign of fear. 
‘Years of lost life will be quite dramatic’, Sullivan said, with ‘a huge 
amount of avoidable mortality’. Sarah Woolnough, executive 
director for policy at Cancer Research UK, said there had been a 75 
percent drop in urgent referrals to hospitals by family doctors of 
people with suspected cancer. Sullivan said that ‘a lot of services 
have had to scale back — we’ve seen a dramatic decrease in the 
amount of elective cancer surgery’. Lockdown deaths worldwide has 
been absolutely fantastic with the New York Post reporting how data 
confirmed that ‘lockdowns end more lives than they save’: 


There was a sharp decline in visits to emergency rooms and an increase in fatal heart attacks 
because patients didn’t receive prompt treatment. Many fewer people were screened for 
cancer. Social isolation contributed to excess deaths from dementia and Alzheimer’s. 


Researchers predicted that the social and economic upheaval would lead to tens of thousands 
of “deaths of despair” from drug overdoses, alcoholism and suicide. As unemployment surged 
and mental-health and substance-abuse treatment programs were interrupted, the reported 
levels of anxiety, depression and suicidal thoughts increased dramatically, as did alcohol sales 
and fatal drug overdoses. 


This has been happening while nurses and other staff had so much 
time on their hands in the ‘war-zones’ that Tic-Tok dancing videos 
began appearing across the Internet with medical staff dancing 
around in empty wards and corridors as people died at home from 
causes that would normally have been treated in hospital. 


Mentions in dispatches 

One brave and truth-committed whistleblower was Louise 
Hampton, a call handler with the UK NHS who made a viral 
Internet video saying she had done ‘fuck all’ during the ‘pandemic’ 


which was ‘a load of bollocks’. She said that ‘Covid-19’ was 
rebranded flu and of course she lost her job. This is what happens in 
the medical and endless other professions now when you tell the 
truth. Louise filmed inside ‘war-zone’ accident and emergency 
departments to show they were empty and I mean empty as in no 
one there. The mainstream media could have done the same and 
blown the gaff on the whole conspiracy. They haven't to their eternal 
shame. Not that most ‘journalists’ seem capable of manifesting 
shame as with the psychopaths they slavishly repeat without 
question. The relative few who were admitted with serious health 
problems were left to die alone with no loved ones allowed to see 
them because of ‘Covid’ rules and they included kids dying without 
the comfort of mum and dad at their bedside while the evil behind 
this couldn’t give a damn. It was all good fun to them. A Scottish 
NHS staff nurse publicly quit in the spring of 2021 saying: ‘I can no 
longer be part of the lies and the corruption by the government.’ She 
said hospitals ‘aren’t full, the beds aren’t full, beds have been shut, 
wards have been shut’. Hospitals were never busy throughout 
‘Covid’. The staff nurse said that Nicola Sturgeon, tragically the 
leader of the Scottish government, was on television saying save the 
hospitals and the NHS — ‘but the beds are empty’ and ‘we've not 
seen flu, we always see flu every year’. She wrote to government and 
spoke with her union Unison (the unions are Cult-compromised and 
useless, but nothing changed. Many of her colleagues were scared of 
losing their jobs if they spoke out as they wanted to. She said 
nursing staff were being affected by wearing masks all day and ‘my 
head is splitting every shift from wearing a mask’. The NHS is part 
of the fascist tyranny and must be dismantled so we can start again 
with human beings in charge. (Ironically, hospitals were reported to 
be busier again when official “Covid’ cases fell in spring/summer of 
2021 and many other conditions required treatment at the same time 
as the fake vaccine rollout.) 

I will cover the ‘Covid vaccine’ scam in detail later, but it is 
another indicator of the sickening disregard for human life that Iam 
highlighting here. The DNA-manipulating concoctions do not fulfil 


the definition of a ‘vaccine’, have never been used on humans before 
and were given only emergency approval because trials were not 
completed and they continued using the unknowing public. The 
result was what a NHS senior nurse with responsibility for ‘vaccine’ 
procedure said was ‘genocide’. She said the ‘vaccines’ were not 
‘vaccines’. They had not been shown to be safe and claims about 
their effectiveness by drug companies were ‘poetic licence’. She 
described what was happening as a ‘horrid act of human 
annihilation’. The nurse said that management had instigated a 
policy of not providing a Patient Information Leaflet (PIL) before 
people were ‘vaccinated’ even though health care professionals are 
supposed to do this according to protocol. Patients should also be 
told that they are taking part in an ongoing clinical trial. Her 
challenges to what is happening had seen her excluded from 
meetings and ridiculed in others. She said she was told to “watch my 
step ... or I would find myself surplus to requirements’. The nurse, 
who spoke anonymously in fear of her career, said she asked her 
NHS manager why he/she was content with taking part in genocide 
against those having the ‘vaccines’. The reply was that everyone had 
to play their part and to ‘put up, shut up, and get it done’. 
Government was ‘leaning heavily’ on NHS management which was 
clearly leaning heavily on staff. This is how the global ‘medical’ 
hierarchy operates and it starts with the Cult and its World Health 
Organization. 

She told the story of a doctor who had the Pfizer jab and when 
questioned had no idea what was in it. The doctor had never read 
the literature. We have to stop treating doctors as intellectual giants 
when so many are moral and medical pygmies. The doctor did not 
even know that the ‘vaccines’ were not fully approved or that their 
trials were ongoing. They were, however, asking their patients if 
they minded taking part in follow-ups for research purposes — yes, 
the ongoing clinical trial. The nurse said the doctor’s ignorance was 
not rare and she had spoken to a hospital consultant who had the jab 
without any idea of the background or that the ‘trials’ had not been 
completed. Nurses and pharmacists had shown the same ignorance. 


‘My NHS colleagues have forsaken their duty of care, broken their 
code of conduct — Hippocratic Oath — and have been brainwashed 
just the same as the majority of the UK public through propaganda 
.... She said she had not been able to recruit a single NHS colleague, 
doctor, nurse or pharmacist to stand with her and speak out. Her 
union had refused to help. She said that if the genocide came to light 
she would not hesitate to give evidence at a Nuremberg-type trial 
against those in power who could have affected the outcomes but 
didn’t. 


To put the nonsense into perspective let’s say the ‘virus’ does exist 
and let’s go completely crazy and accept that the official 
manipulated figures for cases and deaths are accurate. Even then a 
study by Stanford University epidemiologist Dr John Ioannidis 
published on the World Health Organization website produced an 
average infection to fatality rate of ... 0.23 percent! Ioannidis said: ‘If 
one could sample equally from all locations globally, the median 
infection fatality rate might even be substantially lower than the 
0.23% observed in my analysis.’ For healthy people under 70 it was 
... 0.05 percent! This compares with the 3.4 percent claimed by the 
Cult-owned World Health Organization when the hoax was first 
played and maximum fear needed to be generated. An updated 
Stanford study in April, 2021, put the ‘infection’ to ‘fatality’ rate at 
just 0.15 percent. Another team of scientists led by Megan O'Driscoll 
and Henrik Salje studied data from 45 countries and published their 
findings on the Nature website. For children and young people the 
figure is so small it virtually does not register although authorities 
will be hyping dangers to the young when they introduce DNA- 
manipulating ‘vaccines’ for children. The O’Driscoll study produced 
an average infection-fatality figure of 0.003 for children from birth to 
four; 0.001 for 5 to 14; 0.003 for 15 to 19; and it was still only 0.456 up 
to 64. To claim that children must be ‘vaccinated’ to protect them 
from ‘Covid’ is an obvious lie and so there must be another reason 
and there is. What’s more the average age of a ‘Covid’ death is akin 


to the average age that people die in general. The average age of 
death in England is about 80 for men and 83 for women. The average 
age of death from alleged ‘Covid’ is between 82 and 83. California 
doctors, Dan Erickson and Artin Massihi, said at their April media 
conference that projection models of millions of deaths had been 
‘woefully inaccurate’. They produced detailed figures showing that 
Californians had a 0.03 chance of dying from ‘Covid’ based on the 
number of people who tested positive (with a test not testing for the 
‘virus’). Erickson said there was a 0.1 percent chance of dying from 
‘Covid’ in the state of New York, not just the city, and a 0.05 percent 
chance in Spain, a centre of ‘Covid-19 hysteria at one stage. The 
Stanford studies supported the doctors’ data with fatality rate 
estimates of 0.23 and 0.15 percent. How close are these figures to my 
estimate of zero? Death-rate figures claimed by the World Health 
Organization at the start of the hoax were some 15 times higher. The 
California doctors said there was no justification for lockdowns and 
the economic devastation they caused. Everything they had ever 
learned about quarantine was that you quarantine the sick and not 
the healthy. They had never seen this before and it made no medical 
sense. 


Why in the in the light of all this would governments and medical 
systems the world over say that billions must go under house arrest; 
lose their livelihood; in many cases lose their mind, their health and 
their life; force people to wear masks dangerous to health and 
psychology; make human interaction and even family interaction a 
criminal offence; ban travel; close restaurants, bars, watching live 
sport, concerts, theatre, and any activity involving human 
togetherness and discourse; and closing schools to isolate children 
from their friends and cause many to commit suicide in acts of 
hopelessness and despair? The California doctors said lockdown 
consequences included increased child abuse, partner abuse, 
alcoholism, depression, and other impacts they were seeing every 
day. Who would do that to the entire human race if not mentally-ill 
psychopaths of almost unimaginable extremes like Bill Gates? We 
must face the reality of what we are dealing with and come out of 


denial. Fascism and tyranny are made possible only by the target 
population submitting and acquiescing to fascism and tyranny. The 
whole of human history shows that to be true. Most people naively 
and unquestioning believed what they were told about a ‘deadly 
virus’ and meekly and weakly submitted to house arrest. Those who 
didn’t believe it — at least in total — still submitted in fear of the 
consequences of not doing so. For the rest who wouldn’t submit 
draconian fines have been imposed, brutal policing by psychopaths 
for psychopaths, and condemnation from the meek and weak who 
condemn the Pushbackers on behalf of the very force that has them, 
too, in its gunsights. ‘Pathetic’ does not even begin to suffice. 
Britain’s brainless ‘Health’ Secretary Matt Hancock warned anyone 
lying to border officials about returning from a list of ‘hotspot’ 
countries could face a jail sentence of up to ten years which is more 
than for racially-aggravated assault, incest and attempting to have 
sex with a child under 13. Hancock is a lunatic, but he has the state 
apparatus behind him in a Cult-led chain reaction and the same with 
UK “Vaccine Minister’ Nadhim Zahawi, a prominent member of the 
mega-Cult secret society, Le Cercle, which featured in my earlier 
books. The Cult enforces its will on governments and medical 
systems; government and medical systems enforce their will on 
business and police; business enforces its will on staff who enforce it 
on customers; police enforce the will of the Cult on the population 
and play their essential part in creating a world of fascist control that 
their own children and grandchildren will have to live in their entire 
lives. It is a hierarchical pyramid of imposition and acquiescence 
and, yes indeedy, of clinical insanity. 

Does anyone bright enough to read this book have to ask what the 
answer is? I think not, but I will reveal it anyway in the fewest of 
syllables: Tell the psychos and their moronic lackeys to fuck off and 
let’s get on with our lives. We are many — They are few. 


CHAPTER SEVEN 
War on your mind 


One believes things because one has been conditioned to believe 
them 
Aldous Huxley, Brave New World 


have described the ‘Covid’ hoax as a ‘Psyop’ and that is true in 

every sense and on every level in accordance with the definition of 
that term which is psychological warfare. Break down the ‘Covid 
pandemic’ to the foundation themes and it is psychological warfare 
on the human individual and collective mind. 

The same can be said for the entire human belief system involving 
every subject you can imagine. Huxley was right in his contention 
that people believe what they are conditioned to believe and this 
comes from the repetition throughout their lives of the same 
falsehoods. They spew from government, corporations, media and 
endless streams of ‘experts’ telling you what the Cult wants you to 
believe and often believing it themselves (although far from always). 
‘Experts’ are rewarded with ‘prestigious’ jobs and titles and as 
agents of perceptual programming with regular access to the media. 
The Cult has to control the narrative — control information — or they 
lose control of the vital, crucial, without-which-they-cannot-prevail 
public perception of reality. The foundation of that control today is 
the Internet made possible by the Defense Advanced Research 
Projects Agency (DARPA), the incredibly sinister technological arm 
of the Pentagon. The Internet is the result of military technology. 


DARPA openly brags about establishing the Internet which has been 
a long-term project to lasso the minds of the global population. I 
have said for decades the plan is to control information to such an 
extreme that eventually no one would see or hear anything that the 
Cult does not approve. We are closing in on that end with ferocious 
censorship since the ‘Covid’ hoax began and in my case it started 
back in the 1990s in terms of books and speaking venues. I had to 
create my own publishing company in 1995 precisely because no one 
else would publish my books even then. I think they’re all still 
running. 


Cult Internet 

To secure total control of information they needed the Internet in 
which pre-programmed algorithms can seek out ‘unclean’ content 
for deletion and even stop it being posted in the first place. The Cult 
had to dismantle print and non-Internet broadcast media to ensure 
the transfer of information to the appropriate-named ‘Web’ — a 
critical expression of the Cult web. We’ve seen the ever-quickening 
demise of traditional media and control of what is left by a tiny 
number of corporations operating worldwide. Independent 
journalism in the mainstream is already dead and never was that 
more obvious than since the turn of 2020. The Cult wants all 
information communicated via the Internet to globally censor and 
allow the plug to be pulled any time. Lockdowns and forced 
isolation has meant that communication between people has been 
through electronic means and no longer through face-to-face 
discourse and discussion. Cult psychopaths have targeted the bars, 
restaurants, sport, venues and meeting places in general for this 
reason. None of this is by chance and it’s to stop people gathering in 
any kind of privacy or number while being able to track and monitor 
all Internet communications and block them as necessary. Even 
private messages between individuals have been censored by these 
fascists that control Cult fronts like Facebook, Twitter, Google and 
YouTube which are all officially run by Sabbatian place-people and 
from the background by higher-level Sabbatian place people. 


Facebook, Google, Amazon and their like were seed-funded and 
supported into existence with money-no-object infusions of funds 
either directly or indirectly from DARPA and CIA technology arm 
In-Q-Tel. The Cult plays the long game and prepares very carefully 
for big plays like ‘Covid’. Amazon is another front in the 
psychological war and pretty much controls the global market in 
book sales and increasingly publishing. Amazon’s limitless funds 
have deleted fantastic numbers of independent publishers to seize 
global domination on the way to deciding which books can be sold 
and circulated and which cannot. Moves in that direction are already 
happening. Amazon’s leading light Jeff Bezos is the grandson of 
Lawrence Preston Gise who worked with DARPA predecessor 
ARPA. Amazon has big connections to the CIA and the Pentagon. 
The plan I have long described went like this: 


1. Employ military technology to establish the Internet. 


2. Sell the Internet as a place where people can freely communicate without censorship and 
allow that to happen until the Net becomes the central and irreversible pillar of human 
society. If the Internet had been highly censored from the start many would have rejected it. 


3. Fund and manipulate major corporations into being to control the circulation of 
information on your Internet using cover stories about geeks in garages to explain how they 
came about. Give them unlimited funds to expand rapidly with no need to make a profit for 
years while non-Cult companies who need to balance the books cannot compete. You know 
that in these circumstances your Googles, YouTubes, Facebooks and Amazons are going to 
secure near monopolies by either crushing or buying up the opposition. 


4. Allow freedom of expression on both the Internet and communication platforms to draw 
people in until the Internet is the central and irreversible pillar of human society and your 
communication corporations have reached a stage of near monopoly domination. 


5. Then unleash your always-planned frenzy of censorship on the basis of ‘where else are 
you going to go?’ and continue to expand that until nothing remains that the Cult does not 
want its human targets to see. 


The process was timed to hit the “Covid’ hoax to ensure the best 
chance possible of controlling the narrative which they knew they 
had to do at all costs. They were, after all, about to unleash a ‘deadly 
virus’ that didn’t really exist. If you do that in an environment of 
free-flowing information and opinion you would be dead in the 


water before you could say Gates is a psychopath. The network was 
in place through which the Cult-created-and-owned World Health 
Organization could dictate the ‘Covid’ narrative and response policy 
slavishly supported by Cult-owned Internet communication giants 
and mainstream media while those telling a different story were 
censored. Google, YouTube, Facebook and Twitter openly 
announced that they would do this. What else would we expect from 
Cult-owned operations like Facebook which former executives have 
confirmed set out to make the platform more addictive than 
cigarettes and coldly manipulates emotions of its users to sow 
division between people and groups and scramble the minds of the 
young? If Zuckerberg lives out the rest of his life without going to 
jail for crimes against humanity, and most emphatically against the 
young, it will be a travesty of justice. Still, no matter, cause and effect 
will catch up with him eventually and the same with Sergey Brin 
and Larry Page at Google with its CEO Sundar Pichai who fix the 
Google search results to promote Cult narratives and hide the 
opposition. Put the same key words into Google and other search 
engines like DuckDuckGo and you will see how different results can 
be. Wikipedia is another intensely biased ‘encyclopaedia’ which 
skews its content to the Cult agenda. YouTube links to Wikipedia’s 
version of ‘Covid’ and ‘climate change’ on video pages in which 
experts in their field offer a different opinion (even that is 
increasingly rare with Wojcicki censorship). Into this “Covid’ silence- 
them network must be added government media censors, sorry 
‘regulators’, such as Ofcom in the UK which imposed tyrannical 
restrictions on British broadcasters that had the effect of banning me 
from ever appearing. Just to debate with me about my evidence and 
views on ‘Covid’ would mean breaking the fascistic impositions of 
Ofcom and its CEO career government bureaucrat Melanie Dawes. 
Gutless British broadcasters tremble at the very thought of fascist 
Ofcom. 


The reason for the ‘Covid’ catastrophe in all its facets and forms can 
be seen by whom and what is driving the policies worldwide in such 
a coordinated way. Decisions are not being made to protect health, 
but to target psychology. The dominant group guiding and 
‘advising’ government policy are not medical professionals. They are 
psychologists and behavioural scientists. Every major country has its 
own version of this phenomenon and I'll use the British example to 
show how it works. In many ways the British version has been 
affecting the wider world in the form of the huge behaviour 
manipulation network in the UK which operates in other countries. 
The network involves private companies, government, intelligence 
and military. The Cabinet Office is at the centre of the government 
‘Covid’ Psyop and part-owns, with ‘innovation charity’ Nesta, the 
Behavioural Insights Team (BIT) which claims to be independent of 
government but patently isn’t. The BIT was established in 2010 and 
its job is to manipulate the psyche of the population to acquiesce to 
government demands and so much more. It is also known as the 
‘Nudge Unit’, a name inspired by the 2009 book by two ultra- 
Zionists, Cass Sunstein and Richard Thaler, called Nudge: Improving 
Decisions About Health, Wealth, and Happiness. The book, as with the 
Behavioural Insights Team, seeks to ‘nudge’ behaviour (manipulate 
it) to make the public follow patterns of action and perception that 
suit those in authority (the Cult). Sunstein is so skilled at this that he 
advises the World Health Organization and the UK Behavioural 
Insights Team and was Administrator of the White House Office of 
Information and Regulatory Affairs in the Obama administration. 
Biden appointed him to the Department of Homeland Security — 
another ultra-Zionist in the fold to oversee new immigration laws 
which is another policy the Cult wants to control. Sunstein is 
desperate to silence anyone exposing conspiracies and co-authored a 
2008 report on the subject in which suggestions were offered to ban 
‘conspiracy theorizing’ or impose ‘some kind of tax, financial or 
otherwise, on those who disseminate such theories’. I guess a 
psychiatrist’s chair is out of the question? 


Sunstein’s mate Richard Thaler, an ‘academic affiliate’ of the UK 
Behavioural Insights Team, is a proponent of ‘behavioural 
economics’ which is defined as the study of ‘the effects of 
psychological, cognitive, emotional, cultural and social factors on the 
decisions of individuals and institutions’. Study the effects so they 
can be manipulated to be what you want them to be. Other leading 
names in the development of behavioural economics are ultra- 
Zionists Daniel Kahneman and Robert J. Shiller and they, with 
Thaler, won the Nobel Memorial Prize in Economic Sciences for their 
work in this field. The Behavioural Insights Team is operating at the 
heart of the UK government and has expanded globally through 
partnerships with several universities including Harvard, Oxford, 
Cambridge, University College London (UCL) and Pennsylvania. 
They claim to have ‘trained’ (reframed) 20,000 civil servants and run 
more than 750 projects involving 400 randomised controlled trials in 
dozens of countries’ as another version of mind reframers Common 
Purpose. BIT works from its office in New York with cities and their 
agencies, as well as other partners, across the United States and 
Canada — this is a company part-owned by the British government 
Cabinet Office. An executive order by President Cult-servant Obama 
established a US Social and Behavioral Sciences Team in 2015. They 
all have the same reason for being and that’s to brainwash the 
population directly and by brainwashing those in positions of 
authority. 


‘Covid’ mind game 

Another prime aspect of the UK mind-control network is the 
‘independent’ [joke] Scientific Pandemic Insights Group on 
Behaviours (SPI-B) which ‘provides behavioural science advice 
aimed at anticipating and helping people adhere to interventions 
that are recommended by medical or epidemiological experts’. That 
means manipulating public perception and behaviour to do 
whatever government tells them to do. It’s disgusting and if they 
really want the public to be ‘safe’ this lot should all be under lock 
and key. According to the government website SPI-B consists of 


‘behavioural scientists, health and social psychologists, 
anthropologists and historians’ and advises the Whitty-Vallance-led 
Scientific Advisory Group for Emergencies (SAGE) which in turn 
advises the government on ‘the science’ (it doesn’t) and ‘Covid’ 
policy. When politicians say they are being guided by ‘the science’ 
this is the rabble in each country they are talking about and that 
‘science’ is dominated by behaviour manipulators to enforce 
government fascism through public compliance. The Behaviour 
Insight Team is headed by psychologist David Solomon Halpern, a 
visiting professor at King’s College London, and connects with a 
national and global web of other civilian and military organisations 
as the Cult moves towards its goal of fusing them into one fascistic 
whole in every country through its ‘Fusion Doctrine’. The behaviour 
manipulation network involves, but is not confined to, the Foreign 
Office; National Security Council; government communications 
headquarters (GCHQ); MI5; MI6; the Cabinet Office-based Media 
Monitoring Unit; and the Rapid Response Unit which ‘monitors 
digital trends to spot emerging issues; including misinformation and 
disinformation; and identifies the best way to respond’. 

There is also the 77th Brigade of the UK military which operates 
like the notorious Israeli military’s Unit 8200 in manipulating 
information and discussion on the Internet by posing as members of 
the public to promote the narrative and discredit those who 
challenge it. Here we have the military seeking to manipulate 
domestic public opinion while the Nazis in government are fine with 
that. Conservative Member of Parliament Tobias Ellwood, an 
advocate of lockdown and control through ‘vaccine passports’, is a 
Lieutenant Colonel reservist in the 77th Brigade which connects with 
the military operation jHub, the ‘innovation centre’ for the Ministry 
of Defence and Strategic Command. jHub has also been involved 
with the civilian National Health Service (NHS) in ‘symptom 
tracing’ the population. The NHS is a key part of this mind control 
network and produced a document in December, 2020, explaining to 
staff how to use psychological manipulation with different groups 
and ages to get them to have the DNA-manipulating ‘Covid vaccine’ 


that’s designed to cumulatively rewrite human genetics. The 
document, called ‘Optimising Vaccination Roll Out — Do’s and Dont’s 
for all messaging, documents and “communications” in the widest 
sense’, was published by NHS England and the NHS Improvement 
Behaviour Change Unit in partnership with Public Health England 
and Warwick Business School. I hear the mantra about ‘save the 
NHS’ and ‘protect the NHS’ when we need to scrap the NHS and 
start again. The current version is far too corrupt, far too anti-human 
and totally compromised by Cult operatives and their assets. UK 
government broadcast media censor Ofcom will connect into this 
web — as will the BBC with its tremendous Ofcom influence — to 
control what the public see and hear and dictate mass perception. 
Nuremberg trials must include personnel from all these 
organisations. 


The fear factor 

The ‘Covid’ hoax has led to the creation of the UK Cabinet Office- 
connected Joint Biosecurity Centre (JBC) which is officially described 
as providing ‘expert advice on pandemics’ using its independent [all 
Cult operations are ‘independent’] analytical function to provide 
real-time analysis about infection outbreaks to identify and respond 
to outbreaks of Covid-19’. Another role is to advise the government 
on a response to spikes in infections — ‘for example by closing 
schools or workplaces in local areas where infection levels have 
risen’. Put another way, promoting the Cult agenda. The Joint 
Biosecurity Centre is modelled on the Joint Terrorism Analysis 
Centre which analyses intelligence to set ‘terrorism threat levels’ and 
here again you see the fusion of civilian and military operations and 
intelligence that has led to military intelligence producing 
documents about ‘vaccine hesitancy’ and how it can be combated. 
Domestic civilian matters and opinions should not be the business of 
the military. The Joint Biosecurity Centre is headed by Tom Hurd, 
director general of the Office for Security and Counter-Terrorism 
from the establishment-to-its-fingertips Hurd family. His father is 
former Foreign Secretary Douglas Hurd. How coincidental that Tom 


Hurd went to the elite Eton College and Oxford University with 
Boris Johnson. Imperial College with its ridiculous computer 
modeller Neil Ferguson will connect with this gigantic web that will 
itself interconnect with similar set-ups in other major and not so 
major countries. Compared with this Cult network the politicians, be 
they Boris Johnson, Donald Trump or Joe Biden, are bit-part players 
‘following the science’. The network of psychologists was on the 
‘Covid’ case from the start with the aim of generating maximum fear 
of the ‘virus’ to ensure compliance by the population. A government 
behavioural science group known as SPI-B produced a paper in 
March, 2020, for discussion by the main government science 
advisory group known as SAGE. It was headed ‘Options for 
increasing adherence to social distancing measures’ and it said the 
following in a section headed ‘Persuasion’: 


e A substantial number of people still do not feel sufficiently 
personally threatened; it could be that they are reassured by the 
low death rate in their demographic group, although levels of 
concern may be rising. Having a good understanding of the risk 
has been found to be positively associated with adoption of 
COVID-19 social distancing measures in Hong Kong. 


e The perceived level of personal threat needs to be increased 
among those who are complacent, using hard-hitting evaluation 
of options for increasing social distancing emotional messaging. 
To be effective this must also empower people by making clear 
the actions they can take to reduce the threat. 


¢ Responsibility to others: There seems to be insufficient 
understanding of, or feelings of responsibility about, people’s role 
in transmitting the infection to others ... Messaging about actions 
need to be framed positively in terms of protecting oneself and 
the community, and increase confidence that they will be effective. 


¢ Some people will be more persuaded by appeals to play by the 
rules, some by duty to the community, and some to personal risk. 


All these different approaches are needed. The messaging also 
needs to take account of the realities of different people’s lives. 
Messaging needs to take account of the different motivational 
levers and circumstances of different people. 


All this could be achieved the SPI-B psychologists said by using the 
media to increase the sense of personal threat which translates as terrify 
the shit out of the population, including children, so they all do what 
we want. That’s not happened has it? Those excuses for ‘journalists’ 
who wouldn’t know journalism if it bit them on the arse (the great 
majority) have played their crucial part in serving this Cult- 
government Psyop to enslave their own kids and grandkids. How 
they live with themselves I have no idea. The psychological war has 
been underpinned by constant government ‘Covid’ propaganda in 
almost every television and radio ad break, plus the Internet and 
print media, which has pounded out the fear with taxpayers footing 
the bill for their own programming. The result has been people 
terrified of a ‘virus’ that doesn’t exist or one with a tiny fatality rate 
even if you believe it does. People walk down the street and around 
the shops wearing face-nappies damaging their health and 
psychology while others report those who refuse to be that naive to 
the police who turn up in their own face-nappies. I had a cameraman 
come to my flat and he was so frightened of ‘Covid’ he came in 
wearing a mask and refused to shake my hand in case he caught 
something. He had — naiveitis — and the thought that he worked in 
the mainstream media was both depressing and made his behaviour 
perfectly explainable. The fear which has gripped the minds of so 
many and frozen them into compliance has been carefully cultivated 
by these psychologists who are really psychopaths. If lives get 
destroyed and a lot of young people commit suicide it shows our 
plan is working. SPI-B then turned to compulsion on the public to 
comply. ‘With adequate preparation, rapid change can be achieved’, 
it said. Some countries had introduced mandatory self-isolation on a 
wide scale without evidence of major public unrest and a large 
majority of the UK’s population appeared to be supportive of more 
coercive measures with 64 percent of adults saying they would 


support putting London under a lockdown (watch the ‘polls’ which 
are designed to make people believe that public opinion is in favour 
or against whatever the subject in hand). 


For ‘aggressive protective measures’ to be effective, the SPI-B 
paper said, special attention should be devoted to those population 
groups that are more at risk. Translated from the Orwellian this 
means making the rest of population feel guilty for not protecting 
the ‘vulnerable’ such as old people which the Cult and its agencies 
were about to kill on an industrial scale with lockdown, lack of 
treatment and the Gates ‘vaccine’. Psychopath psychologists sold 
their guilt-trip so comprehensively that Los Angeles County 
Supervisor Hilda Solis reported that children were apologising (from 
a distance) to their parents and grandparents for bringing ‘Covid’ 
into their homes and getting them sick. ‘... These apologies are just 
some of the last words that loved ones will ever hear as they die 
alone,’ she said. Gut-wrenchingly Solis then used this childhood 
tragedy to tell children to stay at home and ‘keep your loved ones 
alive’. Imagine heaping such potentially life-long guilt on a kid when 
it has absolutely nothing to do with them. These people are deeply 
disturbed and the psychologists behind this even more so. 


Uncivil war — divide and rule 

Professional mind-controllers at SPI-B wanted the media to increase 
a sense of responsibility to others (do as you're told) and promote 
‘positive messaging’ for those actions while in contrast to invoke 
‘social disapproval’ by the unquestioning, obedient, community of 
anyone with a mind of their own. Again the compliant Goebbels-like 
media obliged. This is an old, old, trick employed by tyrannies the 
world over throughout human history. You get the target population 
to keep the target population in line — your line. SPI-B said this could 
‘play an important role in preventing anti-social behaviour or 
discouraging failure to enact pro-social behaviour’. For ‘anti-social’ 
in the Orwellian parlance of SPI-B see any behaviour that 
government doesn’t approve. SPI-B recommendations said that 
‘social disapproval’ should be accompanied by clear messaging and 


promotion of strong collective identity — hence the government and 
celebrity mantra of ‘we're all in this together’. Sure we are. The mind 
doctors have such contempt for their targets that they think some 
clueless comedian, actor or singer telling them to do what the 
government wants will be enough to win them over. We have had 
UK comedian Lenny Henry, actor Michael Caine and singer Elton 
John wheeled out to serve the propagandists by urging people to 
have the DNA-manipulating “Covid’ non-’vaccine’. The role of 
Henry and fellow black celebrities in seeking to coax a ‘vaccine’ 
reluctant black community into doing the government's will was 
especially stomach-turning. An emotion-manipulating script and 
carefully edited video featuring these black ‘celebs’ was such an 
insult to the intelligence of black people and where’s the self-respect 
of those involved selling their souls to a fascist government agenda? 
Henry said he heard black people’s ‘legitimate worries and 
concerns’, but people must “trust the facts’ when they were doing 
exactly that by not having the ‘vaccine’. They had to include the 
obligatory reference to Black Lives Matter with the line ... ‘Don’t let 
coronavirus cost even more black lives — because we matter’. My 
god, it was pathetic. ‘I know the vaccine is safe and what it does.’ 
How? ‘I’m a comedian and it says so in my script.’ 


SPI-B said social disapproval needed to be carefully managed to 
avoid victimisation, scapegoating and misdirected criticism, but they 
knew that their ‘recommendations’ would lead to exactly that and 
the media were specifically used to stir-up the divide-and-conquer 
hostility. Those who conform like good little baa, baas, are praised 
while those who have seen through the tidal wave of lies are 
‘Covidiots’. The awake have been abused by the fast asleep for not 
conforming to fascism and impositions that the awake know are 
designed to endanger their health, dehumanise them, and tear 
asunder the very fabric of human society. We have had the curtain- 
twitchers and morons reporting neighbours and others to the face- 
nappied police for breaking ‘Covid rules’ with fascist police 
delighting in posting links and phone numbers where this could be 
done. The Cult cannot impose its will without a compliant police 


and military or a compliant population willing to play their part in 
enslaving themselves and their kids. The words of a pastor in Nazi 
Germany are so appropriate today: 


First they came for the socialists and | did not speak out because | was not a socialist. 


Then they came for the trade unionists and | did not speak out because | was not a trade 
unionist. 


Then they came for the Jews and | did not speak out because | was not a Jew. 


Then they came for me and there was no one left to speak for me. 


Those who don’t learn from history are destined to repeat it and so 
many are. 


‘Covid' rules: Rewiring the mind 

With the background laid out to this gigantic national and global 
web of psychological manipulation we can put ‘Covid’ rules into a 
clear and sinister perspective. Forget the claims about protecting 
health. ‘Covid’ rules are about dismantling the human mind, 
breaking the human spirit, destroying self-respect, and then putting 
Humpty Dumpty together again as a servile, submissive slave. Social 
isolation through lockdown and distancing have devastating effects 
on the human psyche as the psychological psychopaths well know 
and that’s the real reason for them. Humans need contact with each 
other, discourse, closeness and touch, or they eventually, and 
literarily, go crazy. Masks, which I will address at some length, 
fundamentally add to the effects of isolation and the Cult agenda to 
dehumanise and de-individualise the population. To do this while 
knowing — in fact seeking — this outcome is the very epitome of evil 
and psychologists involved in this are the epitome of evil. They must 
like all the rest of the Cult demons and their assets stand trial for 
crimes against humanity on a scale that defies the imagination. 
Psychopaths in uniform use isolation to break enemy troops and 
agents and make them subservient and submissive to tell what they 
know. The technique is rightly considered a form of torture and 


torture is most certainly what has been imposed on the human 
population. 

Clinically-insane American psychologist Harry Harlow became 
famous for his isolation experiments in the 1950s in which he 
separated baby monkeys from their mothers and imprisoned them 
for months on end in a metal container or ‘pit of despair’. They soon 
began to show mental distress and depression as any idiot could 
have predicted. Harlow put other monkeys in steel chambers for 
three, six or twelve months while denying them any contact with 
animals or humans. He said that the effects of total social isolation 
for six months were ‘so devastating and debilitating that we had 
assumed initially that twelve months of isolation would not produce 
any additional decrement’; but twelve months of isolation ‘almost 
obliterated the animals socially’. This is what the Cult and its 
psychopaths are doing to you and your children. Even monkeys in 
partial isolation in which they were not allowed to form 
relationships with other monkeys became ‘aggressive and hostile, 
not only to others, but also towards their own bodies’. We have seen 
this in the young as a consequence of lockdown. UK government 
psychopaths launched a public relations campaign telling people not 
to hug each other even after they received the ‘Covid-19 vaccine’ 
which we were told with more lies would allow a return to ‘normal 
life’. A government source told The Telegraph: ‘It will be along the 
lines that it is great that you have been vaccinated, but if you are 
going to visit your family and hug your grandchildren there is a 
chance you are going to infect people you love.’ The source was 
apparently speaking from a secure psychiatric facility. Janet Lord, 
director of Birmingham University’s Institute of Inflammation and 
Ageing, said that parents and grandparents should avoid hugging 
their children. Well, how can I put it, Ms Lord? Fuck off. Yep, that'll 
do. 


Destroying the kids — where are the parents? 
Observe what has happened to people enslaved and isolated by 
lockdown as suicide and self-harm has soared worldwide, 


particularly among the young denied the freedom to associate with 
their friends. A study of 49,000 people in English-speaking countries 
concluded that almost half of young adults are at clinical risk of 
mental health disorders. A national survey in America of 1,000 
currently enrolled high school and college students found that 5 
percent reported attempting suicide during the pandemic. Data from 
the US CDC’s National Syndromic Surveillance Program from 
January 1st to October 17th, 2020, revealed a 31 percent increase in 
mental health issues among adolescents aged 12 to 17 compared 
with 2019. The CDC reported that America in general suffered the 
biggest drop in life expectancy since World War Two as it fell by a 
year in the first half of 2020 as a result of ‘deaths of despair’ — 
overdoses and suicides. Deaths of despair have leapt by more than 
20 percent during lockdown and include the highest number of fatal 
overdoses ever recorded in a single year — 81,000. Internet addiction 
is another consequence of being isolated at home which lowers 
interest in physical activities as kids fall into inertia and what's the 
point? Children and young people are losing hope and giving up on 
life, sometimes literally. A 14-year-old boy killed himself in 
Maryland because he had ‘given up’ when his school district didn’t 
reopen; an 11-year-old boy shot himself during a zoom class; a 
teenager in Maine succumbed to the isolation of the ‘pandemic’ 
when he ended his life after experiencing a disrupted senior year at 
school. Children as young as nine have taken their life and all these 
stories can be repeated around the world. Careers are being 
destroyed before they start and that includes those in sport in which 
promising youngsters have not been able to take part. The plan of 
the psycho-psychologists is working all right. Researchers at 
Cambridge University found that lockdowns cause significant harm 
to children’s mental health. Their study was published in the 
Archives of Disease in Childhood, and followed 168 children aged 
between 7 and 11. The researchers concluded: 


During the UK lockdown, children’s depression symptoms have increased substantially, 
relative to before lockdown. The scale of this effect has direct relevance for the continuation 
of different elements of lockdown policy, such as complete or partial school closures ... 


... Specifically, we observed a statistically significant increase in ratings of depression, with a 
medium-to-large effect size. Our findings emphasise the need to incorporate the potential 
impact of lockdown on child mental health in planning the ongoing response to the global 
pandemic and the recovery from it. 


Not a chance when the Cult’s psycho-psychologists were getting 
exactly what they wanted. The UK’s Royal College of Paediatrics and 
Child Health has urged parents to look for signs of eating disorders 
in children and young people after a three to four fold increase. 
Specialists say the ‘pandemic’ is a major reason behind the rise. You 
don’t say. The College said isolation from friends during school 
closures, exam cancellations, loss of extra-curricular activities like 
sport, and an increased use of social media were all contributory 
factors along with fears about the virus (psycho-psychologists 
again), family finances, and students being forced to quarantine. 
Doctors said young people were becoming severely ill by the time 
they were seen with ‘Covid’ regulations reducing face-to-face 
consultations. Nor is it only the young that have been devastated by 
the psychopaths. Like all bullies and cowards the Cult is targeting 
the young, elderly, weak and infirm. A typical story was told by a 
British lady called Lynn Parker who was not allowed to visit her 
husband in 2020 for the last ten and half months of his life ‘when he 
needed me most’ between March 20th and when he died on 
December 19th. This vacates the criminal and enters the territory of 
evil. The emotional impact on the immune system alone is immense 
as are the number of people of all ages worldwide who have died as 
a result of Cult-demanded, Gates-demanded, lockdowns. 


Isolation is torture 


The experience of imposing solitary confinement on millions of 
prisoners around the world has shown how a large percentage 
become ‘actively psychotic and/or acutely suicidal’. Social isolation 
has been found to trigger ‘a specific psychiatric syndrome, 
characterized by hallucinations; panic attacks; overt paranoia; 
diminished impulse control; hypersensitivity to external stimuli; and 
difficulties with thinking, concentration and memory’. Juan Mendez, 


a United Nations rapporteur (investigator), said that isolation is a 
form of torture. Research has shown that even after isolation 
prisoners find it far more difficult to make social connections and I 
remember chatting to a shop assistant after one lockdown who told 
me that when her young son met another child again he had no idea 
how to act or what to do. Hannah Flanagan, Director of Emergency 
Services at Journey Mental Health Center in Dane County, 
Wisconsin, said: ‘The specificity about Covid social distancing and 
isolation that we’ve come across as contributing factors to the 
suicides are really new to us this year.’ But they are not new to those 
that devised them. They are getting the effect they want as the 
population is psychologically dismantled to be rebuilt in a totally 
different way. Children and the young are particularly targeted. 
They will be the adults when the full-on fascist Al-controlled 
technocracy is planned to be imposed and they are being prepared 
to meekly submit. At the same time older people who still have a 
memory of what life was like before — and how fascist the new 
normal really is — are being deleted. You are going to see efforts to 
turn the young against the old to support this geriatric genocide. 
Hannah Flanagan said the big increase in suicide in her county 
proved that social isolation is not only harmful, but deadly. Studies 
have shown that isolation from others is one of the main risk factors 
in suicide and even more so with women. Warnings that lockdown 
could create a ‘perfect storm’ for suicide were ignored. After all this 
was one of the reasons for lockdown. Suicide, however, is only the 
most extreme of isolation consequences. There are many others. Dr 
Dhruv Khullar, assistant professor of healthcare policy at Weill 
Cornell Medical College, said in a New York Times article in 2016 long 
before the fake ‘pandemic’: 


A wave of new research suggests social separation is bad for us. Individuals with less social 
connection have disrupted sleep patterns, altered immune systems, more inflammation and 
higher levels of stress hormones. One recent study found that isolation increases the risk of 
heart disease by 29 percent and stroke by 32 percent. Another analysis that pooled data from 
70 studies and 3.4 million people found that socially isolated individuals had a 30 percent 
higher risk of dying in the next seven years, and that this effect was largest in middle age. 


Loneliness can accelerate cognitive decline in older adults, and isolated individuals are twice 
as likely to die prematurely as those with more robust social interactions. These effects start 
early: Socially isolated children have significantly poorer health 20 years later, even after 
controlling for other factors. All told, loneliness is as important a risk factor for early death as 
obesity and smoking. 


There you have proof from that one article alone four years before 
2020 that those who have enforced lockdown, social distancing and 
isolation knew what the effect would be and that is even more so 
with professional psychologists that have been driving the policy 
across the globe. We can go back even further to the years 2000 and 
2003 and the start of a major study on the effects of isolation on 
health by Dr Janine Gronewold and Professor Dirk M. Hermann at 
the University Hospital in Essen, Germany, who analysed data on 
4,316 people with an average age of 59 who were recruited for the 
long-term research project. They found that socially isolated people 
are more than 40 percent more likely to have a heart attack, stroke, 
or other major cardiovascular event and nearly 50 percent more 
likely to die from any cause. Given the financial Armageddon 
unleashed by lockdown we should note that the study found a 
relationship between increased cardiovascular risk and lack of 
financial support. After excluding other factors social isolation was 
still connected to a 44 percent increased risk of cardiovascular 
problems and a 47 percent increased risk of death by any cause. Lack 
of financial support was associated with a 30 percent increase in the 
risk of cardiovascular health events. Dr Gronewold said it had been 
known for some time that feeling lonely or lacking contact with close 
friends and family can have an impact on physical health and the 
study had shown that having strong social relationships is of high 
importance for heart health. Gronewold said they didn’t understand 
yet why people who are socially isolated have such poor health 
outcomes, but this was obviously a worrying finding, particularly 
during these times of prolonged social distancing. Well, it can be 
explained on many levels. You only have to identify the point in the 
body where people feel loneliness and missing people they are 
parted from — it’s in the centre of the chest where they feel the ache 
of loneliness and the ache of missing people. ‘My heart aches for 


you’ ... ‘My heart aches for some company.’ I will explain this more 
in the chapter Escaping Wetiko, but when you realise that the body 
is the mind — they are expressions of each other — the reason why 
state of the mind dictates state of the body becomes clear. 


American psychologist Ranjit Powar was highlighting the effects 
of lockdown isolation as early as April, 2020. She said humans have 
evolved to be social creatures and are wired to live in interactive 
groups. Being isolated from family, friends and colleagues could be 
unbalancing and traumatic for most people and could result in short 
or even long-term psychological and physical health problems. An 
increase in levels of anxiety, aggression, depression, forgetfulness 
and hallucinations were possible psychological effects of isolation. 
‘Mental conditions may be precipitated for those with underlying 
pre-existing susceptibilities and show up in many others without 
any pre-condition.” Powar said personal relationships helped us cope 
with stress and if we lost this outlet for letting off steam the result 
can be a big emotional void which, for an average person, was 
difficult to deal with. ‘Just a few days of isolation can cause 
increased levels of anxiety and depression’ — so what the hell has 
been the effect on the global population of 18 months of this at the 
time of writing? Powar said: ‘Add to it the looming threat of a 
dreadful disease being repeatedly hammered in through the media 
and you have a recipe for many shades of mental and physical 
distress.’ For those with a house and a garden it is easy to forget that 
billions have had to endure lockdown isolation in tiny overcrowded 
flats and apartments with nowhere to go outside. The psychological 
and physical consequences of this are unimaginable and with lunatic 
and abusive partners and parents the consequences have led to 
tremendous increases in domestic and child abuse and alcoholism as 
people seek to shut out the horror. Ranjit Powar said: 


Staying in a confined space with family is not all a rosy picture for everyone. It can be 
extremely oppressive and claustrophobic for large low-income families huddled together in 
small single-room houses. Children here are not lucky enough to have many board/electronic 
games or books to keep them occupied. 


Add to it the deep insecurity of running out of funds for food and basic necessities. On the 
other hand, there are people with dysfunctional family dynamics, such as domineering, 
abusive or alcoholic partners, siblings or parents which makes staying home a period of trial. 
Incidence of suicide and physical abuse against women has shown a worldwide increase. 
Heightened anxiety and depression also affect a person’s immune system, making them more 
susceptible to illness. 


To think that Powar’s article was published on April 11th, 2020. 


Six-feet fantasy 

Social (unsocial) distancing demanded that people stay six feet or 
two metres apart. UK government advisor Robert Dingwall from the 
New and Emerging Respiratory Virus Threats Advisory Group said 
in a radio interview that the two-metre rule was ‘conjured up out of 
nowhere’ and was not based on science. No, it was not based on 
medical science, but it didn’t come out of nowhere. The distance 
related to psychological science. Six feet/two metres was adopted in 
many countries and we were told by people like the criminal 
Anthony Fauci and his ilk that it was founded on science. Many 
schools could not reopen because they did not have the space for six- 
feet distancing. Then in March, 2021, after a year of six-feet ‘science’, 
a study published in the Journal of Infectious Diseases involving more 
than 500,000 students and almost 100,000 staff over 16 weeks 
revealed no significant difference in “‘Covid’ cases between six feet 
and three feet and Fauci changed his tune. Now three feet was okay. 
There is no difference between six feet and three inches when there is 
no ‘virus’ and they got away with six feet for psychological reasons 
for as long as they could. I hear journalists and others talk about 
‘unintended consequences’ of lockdown. They are not unintended at 
all; they have been coldly-calculated for a specific outcome of human 
control and that’s why super-psychopaths like Gates have called for 
them so vehemently. Super-psychopath psychologists have 
demanded them and psychopathic or clueless, spineless, politicians 
have gone along with them by ‘following the science’. But it’s not 
science at all. ‘Science’ is not what is; it’s only what people can be 
manipulated to believe it is. The whole ‘Covid’ catastrophe is 


founded on mind control. Three word or three statement mantras 
issued by the UK government are a well-known mind control 
technique and so we’ve had ‘Stay home/protect the NHS/save lives’, 
‘Stay alert/control the virus/save lives’ and ‘hands/face/space’. One 
of the most vocal proponents of extreme ‘Covid’ rules in the UK has 
been Professor Susan Michie, a member of the British Communist 
Party, who is not a medical professional. Michie is the director of the 
Centre for Behaviour Change at University College London. She is a 
behavioural psychologist and another filthy rich ‘Marxist’ who praised 
China’s draconian lockdown. She was known by fellow students at 
Oxford University as ‘Stalin’s nanny’ for her extreme Marxism. 
Michie is an influential member of the UK government’s Scientific 
Advisory Group for Emergencies (SAGE) and behavioural 
manipulation groups which have dominated ‘Covid’ policy. She is a 
consultant adviser to the World Health Organization on ‘Covid-19’ 
and behaviour. Why the hell are lockdowns anything to do with her 
when they are claimed to be about health? Why does a behavioural 
psychologist from a group charged with changing the behaviour of 
the public want lockdown, human isolation and mandatory masks? 
Does that question really need an answer? Michie absolutely has to 
explain herself before a Nuremberg court when humanity takes back 
its world again and even more so when you see the consequences of 
masks that she demands are compulsory. This is a Michie classic: 


The benefits of getting primary school children to wear masks is that regardless of what little 
degree of transmission is occurring in those age groups it could help normalise the practice. 
Young children wearing masks may be more likely to get their families to accept masks. 


Those words alone should carry a prison sentence when you 
ponder on the callous disregard for children involved and what a 
statement it makes about the mind and motivations of Susan Michie. 
What a lovely lady and what she said there encapsulates the 
mentality of the psychopaths behind the ‘Covid’ horror. Let us 
compare what Michie said with a countrywide study in Germany 
published at researchsquare.com involving 25,000 school children 
and 17,854 health complaints submitted by parents. Researchers 


found that masks are harming children physically, psychologically, 
and behaviourally with 24 health issues associated with mask 
wearing. They include: shortness of breath (29.7%); dizziness 
(26.4%); increased headaches (53%); difficulty concentrating (50%); 
drowsiness or fatigue (37%); and malaise (42%). Nearly a third of 
children experienced more sleep issues than before and a quarter 
developed new fears. Researchers found health issues and other 
impairments in 68 percent of masked children covering their faces 
for an average of 4.5 hours a day. Hundreds of those taking part 
experienced accelerated respiration, tightness in the chest, weakness, 
and short-term impairment of consciousness. A reminder of what 
Michie said again: 


The benefits of getting primary school children to wear masks is that regardless of what little 
degree of transmission is occurring in those age groups it could help normalise the practice. 
Young children wearing masks may be more likely to get their families to accept masks. 


Psychopaths in government and psychology now have children and 
young people — plus all the adults — wearing masks for hours on end 
while clueless teachers impose the will of the psychopaths on the 
young they should be protecting. What the hell are parents doing? 


We have some schools already imposing on students microchipped 
buzzers that activate when they get ‘too close’ to their pals in the 
way they do with lab rats. How apt. To the Cult and its brain-dead 
servants our children are lab rats being conditioned to be 
unquestioning, dehumanised slaves for the rest of their lives. 
Children and young people are being weaned and frightened away 
from the most natural human instincts including closeness and 
touch. I have tracked in the books over the years how schools were 
banning pupils from greeting each other with a hug and the whole 
Cult-induced Me Too movement has terrified men and boys from a 
relaxed and natural interaction with female friends and work 
colleagues to the point where many men try never to be in a room 


alone with a woman that’s not their partner. Airhead celebrities have 
as always played their virtue-signalling part in making this happen 
with their gross exaggeration. For every monster like Harvey 
Weinstein there are at least tens of thousands of men that don’t treat 
women like that; but everyone must be branded the same and policy 
changed for them as well as the monster. Iam going to be using the 
word ‘dehumanise’ many times in this chapter because that is what 
the Cult is seeking to do and it goes very deep as we shall see. Don’t 
let them kid you that social distancing is planned to end one day. 
That’s not the idea. We are seeing more governments and companies 
funding and producing wearable gadgets to keep people apart and 
they would not be doing that if this was meant to be short-term. A 
tech start-up company backed by GCHQ, the British Intelligence and 
military surveillance headquarters, has created a social distancing 
wrist sensor that alerts people when they get too close to others. The 
CIA has also supported tech companies developing similar devices. 
The wearable sensor was developed by Tended, one of a number of 
start-up companies supported by GCHQ (see the CIA and DARPA). 
The device can be worn on the wrist or as a tag on the waistband and 
will vibrate whenever someone wearing the device breaches social 
distancing and gets anywhere near natural human contact. The 
company had a lucky break in that it was developing a distancing 
sensor when the ‘Covid’ hoax arrived which immediately provided a 
potentially enormous market. How fortunate. The government in 
big-time Cult-controlled Ontario in Canada is investing $2.5 million 
in wearable contact tracing technology that ‘will alert users if they 
may have been exposed to the Covid-19 in the workplace and will 
beep or vibrate if they are within six feet of another person’. 
Facedrive Inc., the technology company behind this, was founded in 
2016 with funding from the Ontario Together Fund and obviously 
they, too, had a prophet on the board of directors. The human 
surveillance and control technology is called TraceSCAN and would 
be worn by the human cyborgs in places such as airports, 
workplaces, construction sites, care homes and ... schools. 


I emphasise schools with children and young people the prime 
targets. You know what is planned for society as a whole if you keep 
your eyes on the schools. They have always been places where the 
state program the next generation of slaves to be its compliant 
worker-ants — or Woker-ants these days; but in the mist of the 
‘Covid’ madness they have been transformed into mind laboratories 
on a scale never seen before. Teachers and head teachers are just as 
programmed as the kids — often more so. Children are kept apart 
from human interaction by walk lanes, classroom distancing, 
staggered meal times, masks, and the rolling-out of buzzer systems. 
Schools are now physically laid out as a laboratory maze for lab-rats. 
Lunatics at a school in Anchorage, Alaska, who should be 
prosecuted for child abuse, took away desks and forced children to 
kneel (know your place) on a mat for five hours a day while wearing 
a mask and using their chairs as a desk. How this was supposed to 
impact on a ‘virus’ only these clinically insane people can tell you 
and even then it would be clap-trap. The school banned recess 
(interaction), art classes (creativity), and physical exercise (getting 
body and mind moving out of inertia). Everyone behind this outrage 
should be in jail or better still a mental institution. The behavioural 
manipulators are all for this dystopian approach to schools. 
Professor Susan Michie, the mind-doctor and British Communist 
Party member, said it was wrong to say that schools were safe. They 
had to be made so by ‘distancing’, masks and ventilation (sitting all 
day in the cold). I must ask this lady round for dinner on a night I 
know I am going to be out and not back for weeks. She probably 
wouldn't be able to make it, anyway, with all the visits to her own 
psychologist she must have block-booked. 


Masking identity 

I know how shocking it must be for you that a behaviour 
manipulator like Michie wants everyone to wear masks which have 
long been a feature of mind-control programs like the infamous 
MKwUltra in the United States, but, there we are. We live and learn. I 
spent many years from 1996 to right across the millennium 


researching mind control in detail on both sides of the Atlantic and 
elsewhere. I met a large number of mind-control survivors and 
many had been held captive in body and mind by MKUltra. MK 
stands for mind-control, but employs the German spelling in 
deference to the Nazis spirited out of Germany at the end of World 
War Two by Operation Paperclip in which the US authorities, with 
help from the Vatican, transported Nazi mind-controllers and 
engineers to America to continue their work. Many of them were 
behind the creation of NASA and they included Nazi scientist and 
SS officer Wernher von Braun who swapped designing V-2 rockets to 
bombard London with designing the Saturn V rockets that powered 
the NASA moon programme’s Apollo craft. I think I may have 
mentioned that the Cult has no borders. Among Paperclip escapees 
was Josef Mengele, the Angel of Death in the Nazi concentration 
camps where he conducted mind and genetic experiments on 
children often using twins to provide a control twin to measure the 
impact of his ‘work’ on the other. If you want to observe the Cult 
mentality in all its extremes of evil then look into the life of Mengele. 
I have met many people who suffered mercilessly under Mengele in 
the United States where he operated under the name Dr Greene and 
became a stalwart of MKUltra programming and torture. Among his 
locations was the underground facility in the Mojave Desert in 
California called the China Lake Naval Weapons Station which is 
almost entirely below the surface. My books The Biggest Secret, 
Children of the Matrix and The Perception Deception have the detailed 
background to MKultra. 


The best-known MKultra survivor is American Cathy O’Brien. I 
first met her and her late partner Mark Phillips at a conference in 
Colorado in 1996. Mark helped her escape and deprogram from 
decades of captivity in an offshoot of MKUltra known as Project 
Monarch in which ‘sex slaves’ were provided for the rich and 
famous including Father George Bush, Dick Cheney and the 
Clintons. Read Cathy and Mark’s book Trance-Formation of America 
and if you are new to this you will be shocked to the core. I read it in 
1996 shortly before, with the usual synchronicity of my life, I found 


myself given a book table at the conference right next to hers. 
MkKUltra never ended despite being very publicly exposed (only a 
small part of it) in the 1970s and continues in other guises. I am still 
in touch with Cathy. She contacted me during 2020 after masks 
became compulsory in many countries to tell me how they were 
used as part of MKUltra programming. I had been observing “Covid 
regulations’ and the relationship between authority and public for 
months. I saw techniques that I knew were employed on individuals 
in MKUltra being used on the global population. I had read many 
books and manuals on mind control including one called Silent 
Weapons for Quiet Wars which came to light in the 1980s and was a 
guide on how to perceptually program on a mass scale. ‘Silent 
Weapons’ refers to mind-control. I remembered a line from the 
manual as governments, medical authorities and law enforcement 
agencies have so obviously talked to — or rather at — the adult 
population since the ‘Covid’ hoax began as if they are children. The 
document said: 


If a person is spoken to by a T.V. advertiser as if he were a twelve-year-old, then, due to 
suggestibility, he will, with a certain probability, respond or react to that suggestion with the 
uncritical response of a twelve-year-old and will reach in to his economic reservoir and 
deliver its energy to buy that product on impulse when he passes it in the store. 


That’s why authority has spoken to adults like children since all this 
began. 


Why did Michael Jackson wear masks? 

Every aspect of the ‘Covid’ narrative has mind-control as its central 
theme. Cathy O’Brien wrote an article for davidicke.com about the 
connection between masks and mind control. Her daughter Kelly 
who I first met in the 1990s was born while Cathy was still held 
captive in MKUltra. Kelly was forced to wear a mask as part of her 
programming from the age of two to dehumanise her, target her 
sense of individuality and reduce the amount of oxygen her brain 
and body received. Bingo. This is the real reason for compulsory 


masks, why they have been enforced en masse, and why they seek to 
increase the number they demand you wear. First one, then two, 
with one disgraceful alleged ‘doctor’ recommending four which is 
nothing less than a death sentence. Where and how often they must 
be worn is being expanded for the purpose of mass mind control 
and damaging respiratory health which they can call ‘Covid-19’. 
Canada’s government headed by the man-child Justin Trudeau, says 
it’s fine for children of two and older to wear masks. An insane 
‘study’ in Italy involving just 47 children concluded there was no 
problem for babies as young as four months wearing them. Even after 
people were ‘vaccinated’ they were still told to wear masks by the 
criminal that is Anthony Fauci. Cathy wrote that mandating masks 
is allowing the authorities literally to control the air we breathe 
which is what was done in MKUltra. You might recall how the 
singer Michael Jackson wore masks and there is a reason for that. He 
was subjected to MKUltra mind control through Project Monarch 
and his psyche was scrambled by these simpletons. Cathy wrote: 


In MKUltra Project Monarch mind control, Michael Jackson had to wear a mask to silence his 
voice so he could not reach out for help. Remember how he developed that whisper voice 
when he wasn’t singing? Masks control the mind from the outside in, like the redefining of 
words is doing. By controlling what we can and cannot say for fear of being labeled racist or 
beaten, for example, it ultimately controls thought that drives our words and ultimately actions 
(or lack thereof). 


Likewise, a mask muffles our speech so that we are not heard, which controls voice ... words 
... mind. This is Mind Control. Masks are an obvious mind control device, and | am disturbed 
so many people are complying on a global scale. Masks depersonalize while making a person 
feel as though they have no voice. It is a barrier to others. People who would never choose to 
comply but are forced to wear a mask in order to keep their job, and ultimately their family 
fed, are compromised. They often feel shame and are subdued. People have stopped talking 
with each other while media controls the narrative. 


The ‘no voice’ theme has often become literal with train 
passengers told not to speak to each other in case they pass on the 
‘virus’, singing banned for the same reason and bonkers California 
officials telling people riding roller coasters that they cannot shout 
and scream. Cathy said she heard every day from healed MKUltra 
survivors who cannot wear a mask without flashing back on ways 


their breathing was controlled — ‘from ball gags and penises to water 
boarding’. She said that through the years when she saw images of 
people in China wearing masks ‘due to pollution’ that it was really 
to control their oxygen levels. ‘I knew it was as much of a population 
control mechanism of depersonalisation as are burkas’, she said. 
Masks are another Chinese communist/fascist method of control that 
has been swept across the West as the West becomes China at 
lightning speed since we entered 2020. 


Mask-19 


There are other reasons for mandatory masks and these include 
destroying respiratory health to call it ‘Covid-19’ and stunting brain 
development of children and the young. Dr Margarite Griesz- 
Brisson MD, PhD, is a Consultant Neurologist and 
Neurophysiologist and the Founder and Medical Director of the 
London Neurology and Pain Clinic. Her CV goes down the street 
and round the corner. She is clearly someone who cares about people 
and won't parrot the propaganda. Griesz-Brisson has a PhD in 
pharmacology, with special interest in neurotoxicology, 
environmental medicine, neuroregeneration and neuroplasticity (the 
way the brain can change in the light of information received). She 
went public in October, 2020, with a passionate warning about the 
effects of mask-wearing laws: 


The reinhalation of our exhaled air will without a doubt create oxygen deficiency and a 
flooding of carbon dioxide. We know that the human brain is very sensitive to oxygen 
deprivation. There are nerve cells for example in the hippocampus that can’t be longer than 3 
minutes without oxygen — they cannot survive. The acute warning symptoms are headaches, 
drowsiness, dizziness, issues in concentration, slowing down of reaction time — reactions of 
the cognitive system. 


Oh, I know, let’s tell bus, truck and taxi drivers to wear them and 
people working machinery. How about pilots, doctors and police? 
Griesz-Brisson makes the important point that while the symptoms 
she mentions may fade as the body readjusts this does not alter the 
fact that people continue to operate in oxygen deficit with long list of 


potential consequences. She said it was well known that 
neurodegenerative diseases take years or decades to develop. ‘If 
today you forget your phone number, the breakdown in your brain 
would have already started 20 or 30 years ago.’ She said 
degenerative processes in your brain are getting amplified as your 
oxygen deprivation continues through wearing a mask. Nerve cells 
in the brain are unable to divide themselves normally in these 
circumstances and lost nerve cells will no longer be regenerated. 
‘What is gone is gone.’ Now consider that people like shop workers 
and schoolchildren are wearing masks for hours every day. What in 
the name of sanity is going to be happening to them? ‘I do not wear 
a mask, I need my brain to think’, Griesz-Brisson said, ‘I want to 
have a clear head when I deal with my patients and not be ina 
carbon dioxide-induced anaesthesia’. If you are told to wear a mask 
anywhere ask the organisation, police, store, whatever, for their risk 
assessment on the dangers and negative effects on mind and body of 
enforcing mask-wearing. They won't have one because it has never 
been done not even by government. All of them must be subject to 
class-action lawsuits as the consequences come to light. They don’t 
do mask risk assessments for an obvious reason. They know what 
the conclusions would be and independent scientific studies that 
have been done tell a horror story of consequences. 


‘Masks are criminal 

Dr Griesz-Brisson said that for children and adolescents, masks are 
an absolute no-no. They had an extremely active and adaptive 
immune system and their brain was incredibly active with so much 
to learn. “The child’s brain, or the youth’s brain, is thirsting for 
oxygen.’ The more metabolically active an organ was, the more 
oxygen it required; and in children and adolescents every organ was 
metabolically active. Griesz-Brisson said that to deprive a child’s or 
adolescent's brain of oxygen, or to restrict it in any way, was not only 
dangerous to their health, it was absolutely criminal. ‘Oxygen 
deficiency inhibits the development of the brain, and the damage 
that has taken place as a result CANNOT be reversed.’ Mind 


manipulators of MKUltra put masks on two-year-olds they wanted 
to neurologically rewire and you can see why. Griesz-Brisson said a 
child needs the brain to learn and the brain needs oxygen to 
function. ‘We don’t need a clinical study for that. This is simple, 
indisputable physiology.’ Consciously and purposely induced 
oxygen deficiency was an absolutely deliberate health hazard, and 
an absolute medical contraindication which means that ‘this drug, 
this therapy, this method or measure should not be used, and is not 
allowed to be used’. To coerce an entire population to use an 
absolute medical contraindication by force, she said, there had to be 
definite and serious reasons and the reasons must be presented to 
competent interdisciplinary and independent bodies to be verified 
and authorised. She had this warning of the consequences that were 
coming if mask wearing continued: 


When, in ten years, dementia is going to increase exponentially, and the younger generations 
couldn’t reach their god-given potential, it won’t help to say ‘we didn’t need the masks’. | 
know how damaging oxygen deprivation is for the brain, cardiologists know how damaging it 
is for the heart, pulmonologists know how damaging it is for the lungs. Oxygen deprivation 
damages every single organ. Where are our health departments, our health insurance, our 
medical associations? It would have been their duty to be vehemently against the lockdown 
and to stop it and stop it from the very beginning. 


Why do the medical boards issue punishments to doctors who give people exemptions? Does 
the person or the doctor seriously have to prove that oxygen deprivation harms people? What 
kind of medicine are our doctors and medical associations representing? Who is responsible 
for this crime? The ones who want to enforce it? The ones who let it happen and play along, 
or the ones who don’t prevent it? 


All of the organisations and people she mentions there either 
answer directly to the Cult or do whatever hierarchical levels above 
them tell them to do. The outcome of both is the same. ‘It’s not about 
masks, it’s not about viruses, it’s certainly not about your health’, 
Griesz-Brisson said. ‘It is about much, much more. I am not 
participating. Iam not afraid.’ They were taking our air to breathe 
and there was no unfounded medical exemption from face masks. 
Oxygen deprivation was dangerous for every single brain. It had to 
be the free decision of every human being whether they want to 


wear a mask that was absolutely ineffective to protect themselves 
from a virus. She ended by rightly identifying where the 
responsibility lies for all this: 


The imperative of the hour is personal responsibility. We are responsible for what we think, 
not the media. We are responsible for what we do, not our superiors. We are responsible for 
our health, not the World Health Organization. And we are responsible for what happens in 
our country, not the government. 


Halle-bloody-lujah. 


But surgeons wear masks, right? 

Independent studies of mask-wearing have produced a long list of 
reports detailing mental, emotional and physical dangers. What a 
definition of insanity to see police officers imposing mask-wearing 
on the public which will cumulatively damage their health while the 
police themselves wear masks that will cumulatively damage their 
health. It’s utter madness and both public and police do this because 
‘the government says so’ — yes a government of brain-donor idiots 
like UK Health Secretary Matt Hancock reading the ‘follow the 
science’ scripts of psychopathic, lunatic psychologists. The response 
you get from Stockholm syndrome sufferers defending the very 
authorities that are destroying them and their families is that 
‘surgeons wear masks’. This is considered the game, set and match 
that they must work and don’t cause oxygen deficit. Well, actually, 
scientific studies have shown that they do and oxygen levels are 
monitored in operating theatres to compensate. Surgeons wear 
masks to stop spittle and such like dropping into open wounds — not 
to stop ‘viral particles’ which are so miniscule they can only be seen 
through an electron microscope. Holes in the masks are significantly 
bigger than ‘viral particles’ and if you sneeze or cough they will 
breach the mask. I watched an incredibly disingenuous ‘experiment’ 
that claimed to prove that masks work in catching ‘virus’ material 
from the mouth and nose. They did this with a slow motion camera 
and the mask did block big stuff which stayed inside the mask and 


against the face to be breathed in or cause infections on the face as 
we have seen with many children. ‘Viral particles’, however, would 
never have been picked up by the camera as they came through the 
mask when they are far too small to be seen. The ‘experiment’ was 
therefore disingenuous and useless. 


Studies have concluded that wearing masks in operating theatres 
(and thus elsewhere) make no difference to preventing infection 
while the opposite is true with toxic shite building up in the mask 
and this had led to an explosion in tooth decay and gum disease 
dubbed by dentists ‘mask mouth’. You might have seen the Internet 
video of a furious American doctor urging people to take off their 
masks after a four-year-old patient had been rushed to hospital the 
night before and nearly died with a lung infection that doctors 
sourced to mask wearing. A study in the journal Cancer Discovery 
found that inhalation of harmful microbes can contribute to 
advanced stage lung cancer in adults and long-term use of masks 
can help breed dangerous pathogens. Microbiologists have said 
frequent mask wearing creates a moist environment in which 
microbes can grow and proliferate before entering the lungs. The 
Canadian Agency for Drugs and Technologies in Health, or CADTH, 
a Canadian national organisation that provides research and 
analysis to healthcare decision-makers, said this as long ago as 2013 
in a report entitled ‘Use of Surgical Masks in the Operating Room: A 
Review of the Clinical Effectiveness and Guidelines’. It said: 


¢ No evidence was found to support the use of surgical face masks 
to reduce the frequency of surgical site infections 


¢ No evidence was found on the effectiveness of wearing surgical 
face masks to protect staff from infectious material in the 
operating room. 

¢ Guidelines recommend the use of surgical face masks by staff in 
the operating room to protect both operating room staff and 
patients (despite the lack of evidence). 


We were told that the world could go back to ‘normal’ with the 
arrival of the ‘vaccines’. When they came, fraudulent as they are, the 
story changed as I knew that it would. We are in the midst of 
transforming ‘normal’, not going back to it. Mary Ramsay, head of 
immunisation at Public Health England, echoed the words of US 
criminal Anthony Fauci who said masks and other regulations must 
stay no matter if people are vaccinated. The Fauci idiot continued to 
wear two masks — different colours so both could be clearly seen — 
after he claimed to have been vaccinated. Senator Rand Paul told 
Fauci in one exchange that his double-masks were ‘theatre’ and he 
was right. It’s all theatre. Mary Ramsay back-tracked on the vaccine- 
return-to-normal theme when she said the public may need to wear 
masks and social-distance for years despite the jabs. ‘People have got 
used to those lower-level restrictions now, and [they] can live with 
them’, she said telling us what the idea has been all along. ‘The 
vaccine does not give you a pass, even if you have had it, you must 
continue to follow all the guidelines’ said a Public Health England 
statement which reneged on what we had been told before and 
made having the ‘vaccine’ irrelevant to ‘normality’ even by the 
official story. Spain’s fascist government trumped everyone by 
passing a law mandating the wearing of masks on the beach and 
even when swimming in the sea. The move would have devastated 
what's left of the Spanish tourist industry, posed potential breathing 
dangers to swimmers and had Northern European sunbathers 
walking around with their forehead brown and the rest of their face 
white as a sheet. The ruling was so crazy that it had to be retracted 
after pressure from public and tourist industry, but it confirmed 
where the Cult wants to go with masks and how clinically insane 
authority has become. The determination to make masks permanent 
and hide the serious dangers to body and mind can be seen in the 
censorship of scientist Professor Denis Rancourt by Bill Gates- 
funded academic publishing website ResearchGate over his papers 
exposing the dangers and uselessness of masks. Rancourt said: 


ResearchGate today has permanently locked my account, which | have had since 2015. Their 
reasons graphically show the nature of their attack against democracy, and their corruption of 


science ... By their obscene non-logic, a scientific review of science articles reporting on 
harms caused by face masks has a ‘potential to cause harm’. No criticism of the psychological 
device (face masks) is tolerated, if the said criticism shows potential to influence public policy. 


This is what happens in a fascist world. 


Where are the ‘greens (again)? 

Other dangers of wearing masks especially regularly relate to the 
inhalation of minute plastic fibres into the lungs and the deluge of 
discarded masks in the environment and oceans. Estimates 
predicted that more than 1.5 billion disposable masks will end up in 
the world’s oceans every year polluting the water with tons of plastic 
and endangering marine wildlife. Studies project that humans are 
using 129 billion face masks each month worldwide — about three 
million a minute. Most are disposable and made from plastic, non- 
biodegradable microfibers that break down into smaller plastic 
particles that become widespread in ecosystems. They are littering 
cities, clogging sewage channels and turning up in bodies of water. I 
have written in other books about the immense amounts of 
microplastics from endless sources now being absorbed into the 
body. Rolf Halden, director of the Arizona State University (ASU) 
Biodesign Center for Environmental Health Engineering, was the 
senior researcher in a 2020 study that analysed 47 human tissue 
samples and found microplastics in all of them. ‘We have detected 
these chemicals of plastics in every single organ that we have 
investigated’, he said. I wrote in The Answer about the world being 
deluged with microplastics. A study by the Worldwide Fund for 
Nature (WWE) found that people are consuming on average every 
week some 2,000 tiny pieces of plastic mostly through water and also 
through marine life and the air. Every year humans are ingesting 
enough microplastics to fill a heaped dinner plate and in a life-time 
of 79 years it is enough to fill two large waste bins. Marco 
Lambertini, WWF International director general said: ‘Not only are 
plastics polluting our oceans and waterways and killing marine life — 
it’s in all of us and we can’t escape consuming plastics,’ American 


geologists found tiny plastic fibres, beads and shards in rainwater 
samples collected from the remote slopes of the Rocky Mountain 
National Park near Denver, Colorado. Their report was headed: ‘It is 
raining plastic.’ Rachel Adams, senior lecturer in Biomedical Science 
at Cardiff Metropolitan University, said that among health 
consequences are internal inflammation and immune responses to a 
‘foreign body’. She further pointed out that microplastics become 
carriers of toxins including mercury, pesticides and dioxins (a 
known cause of cancer and reproductive and developmental 
problems). These toxins accumulate in the fatty tissues once they 
enter the body through microplastics. Now this is being 
compounded massively by people putting plastic on their face and 
throwing it away. 

Workers exposed to polypropylene plastic fibres known as ‘flock’ 
have developed ‘flock worker’s lung’ from inhaling small pieces of 
the flock fibres which can damage lung tissue, reduce breathing 
capacity and exacerbate other respiratory problems. Now ... 
commonly used surgical masks have three layers of melt-blown 
textiles made of ... polypropylene. We have billions of people 
putting these microplastics against their mouth, nose and face for 
hours at a time day after day in the form of masks. How does 
anyone think that will work out? Imean — what could possibly go 
wrong? We posted a number of scientific studies on this at 
davidicke.com, but when I went back to them as I was writing this 
book the links to the science research website where they were 
hosted were dead. Anything that challenges the official narrative in 
any way is either censored or vilified. The official narrative is so 
unsupportable by the evidence that only deleting the truth can 
protect it. A study by Chinese scientists still survived — with the 
usual twist which it why it was still active, I guess. Yes, they found 
that virtually all the masks they tested increased the daily intake of 
microplastic fibres, but people should still wear them because the 
danger from the ‘virus’ was worse said the crazy ‘team’ from the 
Institute of Hydrobiology in Wuhan. Scientists first discovered 
microplastics in lung tissue of some patients who died of lung cancer 


in the 1990s. Subsequent studies have confirmed the potential health 
damage with the plastic degrading slowly and remaining in the 
lungs to accumulate in volume. Wuhan researchers used a machine 
simulating human breathing to establish that masks shed up to 
nearly 4,000 microplastic fibres in a month with reused masks 
producing more. Scientists said some masks are laced with toxic 
chemicals and a variety of compounds seriously restricted for both 
health and environmental reasons. They include cobalt (used in blue 
dye) and formaldehyde known to cause watery eyes, burning 
sensations in the eyes, nose, and throat, plus coughing, wheezing 
and nausea. No — that must be ‘Covid-19’. 


Mask ‘worms’ 

There is another and potentially even more sinister content of masks. 
Mostly new masks of different makes filmed under a microscope 
around the world have been found to contain strange black fibres or 
‘worms’ that appear to move or ‘crawl’ by themselves and react to 
heat and water. The nearest I have seen to them are the self- 
replicating fibres that are pulled out through the skin of those 
suffering from Morgellons disease which has been connected to the 
phenomena of ‘chemtrails’ which I will bring into the story later on. 
Morgellons fibres continue to grow outside the body and have a 
form of artificial intelligence. Black ‘worm’ fibres in masks have that 
kind of feel to them and there is a nanotechnology technique called 
‘worm micelles’ which carry and release drugs or anything else you 
want to deliver to the body. For sure the suppression of humanity by 
mind altering drugs is the Cult agenda big time and the more 
excuses they can find to gain access to the body the more 
opportunities there are to make that happen whether through 
‘vaccines’ or masks pushed against the mouth and nose for hours on 
end. 


So let us summarise the pros and cons of masks: 


Against masks: Breathing in your own carbon dioxide; depriving the 
body and brain of sufficient oxygen; build-up of toxins in the mask 
that can be breathed into the lungs and cause rashes on the face and 
‘mask-mouth’; breathing microplastic fibres and toxic chemicals into 
the lungs; dehumanisation and deleting individualisation by literally 
making people faceless; destroying human emotional interaction 
through facial expression and deleting parental connection with 
their babies which look for guidance to their facial expression. 


For masks: They don’t protect you from a ‘virus’ that doesn’t exist 
and even if it did ‘viral’ particles are so minute they are smaller than 
the holes in the mask. 


Governments, police, supermarkets, businesses, transport 
companies, and all the rest who seek to impose masks have done no 
risk assessment on their consequences for health and psychology 
and are now open to group lawsuits when the impact becomes clear 
with a cumulative epidemic of respiratory and other disease. 
Authorities will try to exploit these effects and hide the real cause by 
dubbing them ‘Covid-19’. Can you imagine setting out to force the 
population to wear health-destroying masks without doing any 
assessment of the risks? It is criminal and it is evil, but then how 
many people targeted in this way, who see their children told to 
wear them all day at school, have asked for a risk assessment? 
Billions can’t be imposed upon by the few unless the billions allow it. 
Oh, yes, with just a tinge of irony, 85 percent of all masks made 
worldwide come from China. 


‘Covid’ rules include the use of toxic sanitisers and again the health 
consequences of constantly applying toxins to be absorbed through 
the skin is obvious to any level of Renegade Mind. America’s Food 
and Drug Administration (FDA) said that sanitisers are drugs and 
issued a warning about 75 dangerous brands which contain 


methanol used in antifreeze and can cause death, kidney damage 
and blindness. The FDA circulated the following warning even for 
those brands that it claims to be safe: 


Store hand sanitizer out of the reach of pets and children, and children should use it only with 
adult supervision. Do not drink hand sanitizer. This is particularly important for young 
children, especially toddlers, who may be attracted by the pleasant smell or brightly colored 
bottles of hand sanitizer. 


Drinking even a small amount of hand sanitizer can cause alcohol poisoning in children. 
(However, there is no need to be concerned if your children eat with or lick their hands after 
using hand sanitizer.) During this coronavirus pandemic, poison control centers have had an 
increase in calls about accidental ingestion of hand sanitizer, so it is important that adults 
monitor young children’s use. 


Do not allow pets to swallow hand sanitizer. If you think your pet has eaten something 
potentially dangerous, call your veterinarian or a pet poison control center right away. Hand 
sanitizer is flammable and should be stored away from heat and flames. When using hand 
sanitizer, rub your hands until they feel completely dry before performing activities that may 
involve heat, sparks, static electricity, or open flames. 


There you go, perfectly safe, then, and that’s without even a mention 
of the toxins absorbed through the skin. Come on kids — sanitise 
your hands everywhere you go. It will save you from the ‘virus’. Put 
all these elements together of the ‘Covid’ normal and see how much 
health and psychology is being cumulatively damaged, even 
devastated, to ‘protect your health’. Makes sense, right? They are 
only imposing these things because they care, right? Right? 


Submitting to insanity 

Psychological reframing of the population goes very deep and is 
done in many less obvious ways. I hear people say how 
contradictory and crazy ‘Covid’ rules are and how they are ever 
changing. This is explained away by dismissing those involved as 
idiots. It is a big mistake. The Cult is delighted if its cold calculation 
is perceived as incompetence and idiocy when it is anything but. Oh, 
yes, there are idiots within the system — lots of them — but they are 
administering the Cult agenda, mostly unknowingly. They are not 
deciding and dictating it. The bulwark against tyranny is self- 


respect, always has been, always will be. It is self-respect that has 
broken every tyranny in history. By its very nature self-respect will 
not bow to oppression and its perpetrators. There is so little self- 
respect that it’s always the few that overturn dictators. Many may 
eventually follow, but the few with the iron spines (self-respect) kick 
it off and generate the momentum. The Cult targets self-respect in 
the knowledge that once this has gone only submission remains. 
Crazy, contradictory, ever-changing ‘Covid’ rules are systematically 
applied by psychologists to delete self-respect. They want you to see 
that the rules make no sense. It is one thing to decide to do 
something when you have made the choice based on evidence and 
logic. You still retain your self-respect. It is quite another when you 
can see what you are being told to do is insane, ridiculous and 
makes no sense, and yet you still do it. Your self-respect is 
extinguished and this has been happening as ever more obviously 
stupid and nonsensical things have been demanded and the great 
majority have complied even when they can see they are stupid and 
nonsensical. 

People walk around in face-nappies knowing they are damaging 
their health and make no difference to a ‘virus’. They do it in fear of 
not doing it. I know it’s daft, but I’ll do it anyway. When that 
happens something dies inside of you and submissive reframing has 
begun. Next there’s a need to hide from yourself that you have 
conceded your self-respect and you convince yourself that you have 
not really submitted to fear and intimidation. You begin to believe 
that you are complying with craziness because it’s the right thing to 
do. When first you concede your self-respect of 2+2 = 4 to 2+2 =5 you 
know you are compromising your self-respect. Gradually to avoid 
facing that fact you begin to believe that 2+2=5. You have been 
reframed and I have been watching this process happening in the 
human psyche on an industrial scale. The Cult is working to break 
your spirit and one of its major tools in that war is humiliation. I 
read how former American soldier Bradley Manning (later Chelsea 
Manning after a sex-change) was treated after being jailed for 
supplying WikiLeaks with documents exposing the enormity of 


government and elite mendacity. Manning was isolated in solitary 
confinement for eight months, put under 24-hour surveillance, 
forced to hand over clothing before going to bed, and stand naked 
for every roll call. This is systematic humiliation. The introduction of 
anal swab ‘Covid’ tests in China has been done for the same reason 
to delete self-respect and induce compliant submission. Anal swabs 
are mandatory for incoming passengers in parts of China and 
American diplomats have said they were forced to undergo the 
indignity which would have been calculated humiliation by the 
Cult-owned Chinese government that has America in its sights. 


Government-people: An abusive relationship 

Spirit-breaking psychological techniques include giving people hope 
and apparent respite from tyranny only to take it away again. This 
happened in the UK during Christmas, 2020, when the psycho- 
psychologists and their political lackeys announced an easing of 
restrictions over the holiday only to reimpose them almost 
immediately on the basis of yet another lie. There is a big 
psychological difference between getting used to oppression and 
being given hope of relief only to have that dashed. Psychologists 
know this and we have seen the technique used repeatedly. Then 
there is traumatising people before you introduce more extreme 
regulations that require compliance. A perfect case was the 
announcement by the dark and sinister Whitty and Vallance in the 
UK that ‘new data’ predicted that 4,000 could die every day over the 
winter of 2020/2021 if we did not lockdown again. I think they call it 
lying and after traumatising people with that claim out came 
Jackboot Johnson the next day with new curbs on human freedom. 
Psychologists know that a frightened and traumatised mind 
becomes suggestable to submission and behaviour reframing. 
Underpinning all this has been to make people fearful and 
suspicious of each other and see themselves as a potential danger to 
others. In league with deleted self-respect you have the perfect 
psychological recipe for self-loathing. The relationship between 
authority and public is now demonstrably the same as that of 


subservience to an abusive partner. These are signs of an abusive 
relationship explained by psychologist Leslie Becker-Phelps: 


Psychological and emotional abuse: Undermining a partner’s 
self-worth with verbal attacks, name-calling, and belittling. 
Humiliating the partner in public, unjustly accusing them of having 
an affair, or interrogating them about their every behavior. Keeping 
partner confused or off balance by saying they were just kidding or 
blaming the partner for ‘making’ them act this way ... Feigning in 
public that they care while turning against them in private. This 
leads to victims frequently feeling confused, incompetent, unworthy, 
hopeless, and chronically self-doubting. [Apply these techniques to 
how governments have treated the population since New Year, 2020, 
and the parallels are obvious. ] 


Physical abuse: The abuser might physically harm their partner in 
a range of ways, such as grabbing, hitting, punching, or shoving 
them. They might throw objects at them or harm them with a 
weapon. [Observe the physical harm imposed by masks, lockdown, 
and so on.] 


Threats and intimidation: One way abusers keep their partners in 
line is by instilling fear. They might be verbally threatening, or give 
threatening looks or gestures. Abusers often make it known that 
they are tracking their partner’s every move. They might destroy 
their partner’s possessions, threaten to harm them, or threaten to 
harm their family members. Not surprisingly, victims of this abuse 
often feel anxiety, fear, and panic. [No words necessary. ] 


Isolation: Abusers often limit their partner’s activities, forbidding 
them to talk or interact with friends or family. They might limit 
access to a car or even turn off their phone. All of this might be done 
by physically holding them against their will, but is often 
accomplished through psychological abuse and intimidation. The 
more isolated a person feels, the fewer resources they have to help 
gain perspective on their situation and to escape from it. [No words 
necessary. | 


Economic abuse: Abusers often make their partners beholden to 
them for money by controlling access to funds of any kind. They 
might prevent their partner from getting a job or withhold access to 
money they earn from a job. This creates financial dependency that 
makes leaving the relationship very difficult. [See destruction of 
livelihoods and the proposed meagre ‘guaranteed income’ so long as 
you do whatever you are told.] 


Using children: An abuser might disparage their partner’s 
parenting skills, tell their children lies about their partner, threaten 
to take custody of their children, or threaten to harm their children. 
These tactics instil fear and often elicit compliance. [See reframed 
social service mafia and how children are being mercilessly abused 
by the state over ‘Covid’ while their parents look on too frightened 
to do anything. ] 

A further recurring trait in an abusive relationship is the abused 
blaming themselves for their abuse and making excuses for the 
abuser. We have the public blaming each other for lockdown abuse 
by government and many making excuses for the government while 
attacking those who challenge the government. How often we have 
heard authorities say that rules are being imposed or reimposed only 
because people have refused to ‘behave’ and follow the rules. We 
don’t want to do it — it’s you. 

Renegade Minds are an antidote to all of these things. They will 
never concede their self-respect no matter what the circumstances. 
Even when apparent humiliation is heaped upon them they laugh in 
its face and reflect back the humiliation on the abuser where it 
belongs. Renegade Minds will never wear masks they know are only 
imposed to humiliate, suppress and damage both physically and 
psychologically. Consequences will take care of themselves and they 
will never break their spirit or cause them to concede to tyranny. UK 
newspaper columnist Peter Hitchens was one of the few in the 
mainstream media to speak out against lockdowns and forced 
vaccinations. He then announced he had taken the jab. He wanted to 
see family members abroad and he believed vaccine passports were 
inevitable even though they had not yet been introduced. Hitchens 


has a questioning and critical mind, but not a Renegade one. If he 
had no amount of pressure would have made him concede. Hitchens 
excused his action by saying that the battle has been lost. Renegade 
Minds never accept defeat when freedom is at stake and even if they 
are the last one standing the self-respect of not submitting to tyranny 
is more important than any outcome or any consequence. 

That’s why Renegade Minds are the only minds that ever changed 
anything worth changing. 


CHAPTER EIGHT 
‘Reframing insanity 


Insanity is relative. It depends on who has who locked in what cage 
Ray Bradbury 


eframing’ a mind means simply to change its perception and 

behaviour. This can be done subconsciously to such an extent 
that subjects have no idea they have been ‘reframed’ while to any 
observer changes in behaviour and attitudes are obvious. 


Human society is being reframed on a ginormous scale since the 
start of 2020 and here we have the reason why psychologists rather 
than doctors have been calling the shots. Ask most people who have 
succumbed to ‘Covid’ reframing if they have changed and most will 
say ‘no’; but they have and fundamentally. The Cult’s long-game has 
been preparing for these times since way back and crucial to that has 
been to prepare both population and officialdom mentally and 
emotionally. To use the mind-control parlance they had to reframe 
the population with a mentality that would submit to fascism and 
reframe those in government and law enforcement to impose 
fascism or at least go along with it. The result has been the fact- 
deleted mindlessness of “Wokeness’ and officialdom that has either 
enthusiastically or unquestioningly imposed global tyranny 
demanded by reframed politicians on behalf of psychopathic and 
deeply evil cultists. ‘Cognitive reframing’ identifies and challenges 
the way someone sees the world in the form of situations, 
experiences and emotions and then restructures those perceptions to 
view the same set of circumstances in a different way. This can have 


benefits if the attitudes are personally destructive while on the other 
side it has the potential for individual and collective mind control 
which the subject has no idea has even happened. 

Cognitive therapy was developed in the 1960s by Aaron T. Beck 
who was born in Rhode Island in 1921 as the son of Jewish 
immigrants from the Ukraine. He became interested in the 
techniques as a treatment for depression. Beck’s daughter Judith S. 
Beck is prominent in the same field and they founded the Beck 
Institute for Cognitive Behavior Therapy in Philadelphia in 1994. 
Cognitive reframing, however, began to be used worldwide by those 
with a very dark agenda. The Cult reframes politicians to change 
their attitudes and actions until they are completely at odds with 
what they once appeared to stand for. The same has been happening 
to government administrators at all levels, law enforcement, military 
and the human population. Cultists love mind control for two main 
reasons: It allows them to control what people think, do and say to 
secure agenda advancement and, by definition, it calms their 
legendary insecurity and fear of the unexpected. I have studied mind 
control since the time I travelled America in 1996. I may have been 
talking to next to no one in terms of an audience in those years, but 
my goodness did I gather a phenomenal amount of information and 
knowledge about so many things including the techniques of mind 
control. I have described this in detail in other books going back to 
The Biggest Secret in 1998. I met a very large number of people 
recovering from MKuUltra and its offshoots and successors and I 
began to see how these same techniques were being used on the 
population in general. This was never more obvious than since the 
‘Covid’ hoax began. 


Reframing the enforcers 

I have observed over the last two decades and more the very clear 
transformation in the dynamic between the police, officialdom and 
the public. I tracked this in the books as the relationship mutated 
from one of serving the public to seeing them as almost the enemy 
and certainly a lower caste. There has always been a class divide 


based on income and always been some psychopathic, corrupt, and 
big-I-am police officers. This was different. Wholesale change was 
unfolding in the collective dynamic; it was less about money and far 
more about position and perceived power. An us-and-them was 
emerging. Noses were lifted skyward by government administration 
and law enforcement and their attitude to the public they were 
supposed to be serving changed to one of increasing contempt, 
superiority and control. The transformation was so clear and 
widespread that it had to be planned. Collective attitudes and 
dynamics do not change naturally and organically that quickly on 
that scale. I then came across an organisation in Britain called 
Common Purpose created in the late 1980s by Julia Middleton who 
would work in the office of Deputy Prime Minister John Prescott 
during the long and disastrous premiership of war criminal Tony 
Blair. When Blair speaks the Cult is speaking and the man should 
have been in jail a long time ago. Common Purpose proclaims itself 
to be one of the biggest ‘leadership development’ organisations in 
the world while functioning as a charity with all the financial benefits 
which come from that. It hosts ‘leadership development’ courses and 
programmes all over the world and claims to have ‘brought 
together’ what it calls ‘leaders’ from more than 100 countries on six 
continents. The modus operandi of Common Purpose can be 
compared with the work of the UK government's reframing network 
that includes the Behavioural Insights Team ‘nudge unit’ and 
‘Covid’ reframing specialists at SPI-B. WikiLeaks described 
Common Purpose long ago as ‘a hidden virus in our government 
and schools’ which is unknown to the general public: ‘It recruits and 
trains “leaders” to be loyal to the directives of Common Purpose and 
the EU, instead of to their own departments, which they then 
undermine or subvert, the NHS [National Health Service] being an 
example.’ This is a vital point to understand the ‘Covid’ hoax. The 
NHS, and its equivalent around the world, has been utterly reframed 
in terms of administrators and much of the medical personnel with 
the transformation underpinned by recruitment policies. The 
outcome has been the criminal and psychopathic behaviour of the 


NHS over ‘Covid’ and we have seen the same in every other major 
country. WikiLeaks said Common Purpose trainees are ‘learning to 
rule without regard to democracy’ and to usher in a police state 
(current events explained). Common Purpose operated like a ‘glue’ 
and had members in the NHS, BBC, police, legal profession, church, 
many of Britain’s 7,000 quangos, local councils, the Civil Service, 
government ministries and Parliament, and controlled many RDA’s 
(Regional Development Agencies). Here we have one answer for 
how and why British institutions and their like in other countries 
have changed so negatively in relation to the public. This further 
explains how and why the beyond-disgraceful reframed BBC has 
become a propaganda arm of ‘Covid’ fascism. They are all part of a 
network pursuing the same goal. 

By 2019 Common Purpose was quoting a figure of 85,000 ‘leaders’ 
that had attended its programmes. These ‘students’ of all ages are 
known as Common Purpose ‘graduates’ and they consist of 
government, state and local government officials and administrators, 
police chiefs and officers, and a whole range of others operating 
within the national, local and global establishment. Cressida Dick, 
Commissioner of the London Metropolitan Police, is the Common 
Purpose graduate who was the ‘Gold Commander’ that oversaw 
what can only be described as the murder of Brazilian electrician 
Jean Charles de Menezes in 2005. He was held down by 
psychopathic police and shot seven times in the head by a 
psychopathic lunatic after being mistaken for a terrorist when he 
was just a bloke going about his day. Dick authorised officers to 
pursue and keep surveillance on de Menezes and ordered that he be 
stopped from entering the underground train system. Police 
psychopaths took her at her word clearly. She was ‘disciplined’ for 
this outrage by being promoted — eventually to the top of the ‘Met’ 
police where she has been a disaster. Many Chief Constables 
controlling the police in different parts of the UK are and have been 
Common Purpose graduates. I have heard the ‘graduate’ network 
described as a sort of Mafia or secret society operating within the 
fabric of government at all levels pursuing a collective policy 


ingrained at Common Purpose training events. Founder Julia 
Middleton herself has said: 


Locally and internationally, Common Purpose graduates will be ‘lighting small fires’ to create 
change in their organisations and communities ... The Common Purpose effect is best 
illustrated by the many stories of small changes brought about by leaders, who themselves 
have changed. 


A Common Purpose mission statement declared: 


Common Purpose aims to improve the way society works by expanding the vision, decision- 
making ability and influence of all kinds of leaders. The organisation runs a variety of 
educational programmes for leaders of all ages, backgrounds and sectors, in order to provide 
them with the inspirational, information and opportunities they need to change the world. 


Yes, but into what? Since 2020 the answer has become clear. 


NLP and the Delphi technique 

Common Purpose would seem to be a perfect name or would 
common programming be better? One of the foundation methods of 
reaching ‘consensus’ (group think) is by setting the agenda theme 
and then encouraging, cajoling or pressuring everyone to agree a 
‘consensus’ in line with the core theme promoted by Common 
Purpose. The methodology involves the ‘Delphi technique’, or an 
adaption of it, in which opinions are expressed that are summarised 
by a ‘facilitator or change agent’ at each stage. Participants are 
‘encouraged’ to modify their views in the light of what others have 
said. Stage by stage the former individual opinions are merged into 
group consensus which just happens to be what Common Purpose 
wants them to believe. A key part of this is to marginalise anyone 
refusing to concede to group think and turn the group against them 
to apply pressure to conform. We are seeing this very technique used 
on the general population to make ‘Covid’ group-thinkers hostile to 
those who have seen through the bullshit. People can be reframed by 
using perception manipulation methods such as Neuro-Linguistic 
Programming (NLP) in which you change perception with the use of 


carefully constructed language. An NLP website described the 
technique this way: 


... A method of influencing brain behaviour (the ‘neuro’ part of the phrase) through the use of 
language (the ‘linguistic’ part) and other types of communication to enable a person to 
‘recode’ the way the brain responds to stimuli (that’s the ‘programming’) and manifest new 
and better behaviours. Neuro-Linguistic Programming often incorporates hypnosis and self- 
hypnosis to help achieve the change (or ‘programming’) that is wanted. 


British alternative media operation UKColumn has done very 
detailed research into Common Purpose over a long period. I quoted 
co-founder and former naval officer Brian Gerrish in my book 
Remember Who You Are, published in 2011, as saying the following 
years before current times: 


It is interesting that many of the mothers who have had children taken by the State speak of 
the Social Services people being icily cool, emotionless and, as two ladies said in slightly 
different words, ‘... like little robots’. We know that NLP is cumulative, so people can be 
given small imperceptible doses of NLP in a course here, another in a few months, next year 
etc. In this way, major changes are accrued in their personality, but the day by day change is 
almost unnoticeable. 


In these and other ways ‘graduates’ have had their perceptions 
uniformly reframed and they return to their roles in the institutions 
of government, law enforcement, legal profession, military, 
‘education’, the UK National Health Service and the whole swathe of 
the establishment structure to pursue a common agenda preparing 
for the ‘post-industrial’, “post-democratic’ society. I say ‘preparing’ 
but we are now there. ‘Post-industrial’ is code for the Great Reset 
and ‘post-democratic’ is ‘Covid’ fascism. UKColumn has spoken to 
partners of those who have attended Common Purpose ‘training’. 
They have described how personalities and attitudes of ‘graduates’ 
changed very noticeably for the worse by the time they had 
completed the course. They had been ‘reframed’ and told they are 
the ‘leaders’ — the special ones — who know better than the 
population. There has also been the very demonstrable recruitment 
of psychopaths and narcissists into government administration at all 


levels and law enforcement. If you want psychopathy hire 
psychopaths and you get a simple cause and effect. If you want 
administrators, police officers and ‘leaders’ to perceive the public as 
lesser beings who don’t matter then employ narcissists. These 
personalities are identified using ‘psychometrics’ that identifies 
knowledge, abilities, attitudes and personality traits, mostly through 
carefully-designed questionnaires and tests. As this policy has 
passed through the decades we have had power-crazy, power- 
trippers appointed into law enforcement, security and government 
administration in preparation for current times and the dynamic 
between public and law enforcement/officialdom has been 
transformed. UKColumn’s Brian Gerrish said of the narcissistic 
personality: 


Their love of themselves and power automatically means that they will crush others who get 
in their way. | received a major piece of the puzzle when a friend pointed out that when they 
made public officials re-apply for their own jobs several years ago they were also required to 
do psychometric tests. This was undoubtedly the start of the screening process to get ‘their’ 
sort of people in post. 


How obvious that has been since 2020 although it was clear what 
was happening long before if people paid attention to the changing 
public-establishment dynamic. 


Change agents 

At the centre of events in ‘Covid’ Britain is the National Health 
Service (NHS) which has behaved disgracefully in slavishly 
following the Cult agenda. The NHS management structure is awash 
with Common Purpose graduates or ‘change agents’ working to a 
common cause. Helen Bevan, a Chief of Service Transformation at 
the NHS Institute for Innovation and Improvement, co-authored a 
document called ‘Towards a million change agents, a review of the 
social movements literature: implications for large scale change in 
the NHS’. The document compared a project management approach 
to that of change and social movements where ‘people change 


themselves and each other — peer to peer’. Two definitions given for 
a ‘social movement’ were: 


A group of people who consciously attempt to build a radically new social 
order; involves people of a broad range of social backgrounds; and deploys 
politically confrontational and socially disruptive tactics - Cyrus 
Zirakzadeh 1997 


Collective challenges, based on common purposes and social solidarities, in 
sustained interaction with elites, opponents, and authorities — Sidney 
Tarrow 1994 


Helen Bevan wrote another NHS document in which she defined 
‘framing’ as ‘the process by which leaders construct, articulate and 
put across their message in a powerful and compelling way in order 
to win people to their cause and call them to action’. I think I could 
come up with another definition that would be rather more accurate. 
The National Health Service and institutions of Britain and the wider 
world have been taken over by reframed ‘change agents’ and that 
includes everything from the United Nations to national 
governments, local councils and social services which have been 
kidnapping children from loving parents on an extraordinary and 
gathering scale on the road to the end of parenthood altogether. 
Children from loving homes are stolen and kidnapped by the state 
and put into the ‘care’ (inversion) of the local authority through 
council homes, foster parents and forced adoption. At the same time 
children are allowed to be abused without response while many are 
under council ‘care’. UKColumn highlighted the Common Purpose 
connection between South Yorkshire Police and Rotherham council 
officers in the case of the scandal in that area of the sexual 
exploitation of children to which the authorities turned not one blind 
eye, but both: 


We were alarmed to discover that the Chief Executive, the Strategic Director of Children and 
Young People’s Services, the Manager for the Local Strategic Partnership, the Community 
Cohesion Manager, the Cabinet Member for Cohesion, the Chief Constable and his 
predecessor had all attended Leadership training courses provided by the pseudo-charity 
Common Purpose. 


Once ‘change agents’ have secured positions of hire and fire within 
any organisation things start to move very quickly. Personnel are 
then hired and fired on the basis of whether they will work towards 
the agenda the change agent represents. If they do they are rapidly 
promoted even though they may be incompetent. Those more 
qualified and skilled who are pre-Common Purpose ‘old school’ see 
their careers stall and even disappear. This has been happening for 
decades in every institution of state, police, ‘health’ and social 
services and all of them have been transformed as a result in their 
attitudes to their jobs and the public. Medical professions, including 
nursing, which were once vocations for the caring now employ 
many cold, callous and couldn’t give a shit personality types. The 
UKColumn investigation concluded: 


By blurring the boundaries between people, professions, public and private sectors, 
responsibility and accountability, Common Purpose encourages ‘graduates’ to believe that as 
new selected leaders, they can work together, outside of the established political and social 
structures, to achieve a paradigm shift or CHANGE — so called ‘Leading Beyond Authority’. In 
doing so, the allegiance of the individual becomes ‘reframed’ on CP colleagues and their 
NETWORK. 


Nowhere has this process been more obvious than in the police 
where recruitment of psychopaths and development of 
unquestioning mind-controlled group-thinkers have transformed 
law enforcement into a politically-correct ‘Woke’ joke and a travesty 
of what should be public service. Today they wear their face-nappies 
like good little gofers and enforce ‘Covid’ rules which are fascism 
under another name. Alongside the specifically-recruited 
psychopaths we have software minds incapable of free thought. 
Brian Gerrish again: 


An example is the policeman who would not get on a bike for a press photo because he had 
not done the cycling proficiency course. Normal people say this is political correctness gone 
mad. Nothing could be further from the truth. The policeman has been reframed, and in his 

reality it is perfect common sense not to get on the bike ‘because he hasn’t done the cycling 
course’. 


Another example of this is where the police would not rescue a boy from a pond until they 
had taken advice from above on the ‘risk assessment’. A normal person would have arrived, 
perhaps thought of the risk for a moment, and dived in. To the police now ‘reframed’, they 
followed ‘normal’ procedure. 


There are shocking cases of reframed ambulance crews doing the 
same. Sheer unthinking stupidity of London Face-Nappies headed 
by Common Purpose graduate Cressida Dick can be seen in their 
behaviour at a vigil in March, 2021, for a murdered woman, Sarah 
Everard. A police officer had been charged with the crime. Anyone 
with a brain would have left the vigil alone in the circumstances. 
Instead they ‘manhandled’ women to stop them breaking ‘Covid 
rules’ to betray classic reframing. Minds in the thrall of perception 
control have no capacity for seeing a situation on its merits and 
acting accordingly. ‘Rules is rules’ is their only mind-set. My father 
used to say that rules and regulations are for the guidance of the 
intelligent and the blind obedience of the idiot. Most of the 
intelligent, decent, coppers have gone leaving only the other kind 
and a few old school for whom the job must be a daily nightmare. 
The combination of psychopaths and rule-book software minds has 
been clearly on public display in the ‘Covid’ era with automaton 
robots in uniform imposing fascistic ‘Covid’ regulations on the 
population without any personal initiative or judging situations on 
their merits. There are thousands of examples around the world, but 
I’ll make my point with the infamous Derbyshire police in the 
English East Midlands — the ones who think pouring dye into beauty 
spots and using drones to track people walking in the countryside 
away from anyone is called ‘policing’. To them there are rules 
decreed by the government which they have to enforce and in their 
bewildered state a group gathering in a closed space and someone 
walking alone in the countryside are the same thing. It is beyond 
idiocy and enters the realm of clinical insanity. 


Police officers in Derbyshire said they were ‘horrified’ — horrified — 
to find 15 to 20 ‘irresponsible’ kids playing a football match at a 
closed leisure centre ‘in breach of coronavirus restrictions’. When 
they saw the police the kids ran away leaving their belongings 
behind and the reframed men and women of Derbyshire police were 
seeking to establish their identities with a view to fining their 
parents. The most natural thing for youngsters to do — kicking a ball 
about — is turned into a criminal activity and enforced by the 
moronic software programs of Derbyshire police. You find the same 
mentality in every country. These barely conscious ‘horrified’ officers 
said they had to take action because ‘we need to ensure these rules 
are being followed’ and ‘it is of the utmost importance that you 
ensure your children are following the rules and regulations for 
Covid-19’. Had any of them done ten seconds of research to see if 
this parroting of their masters’ script could be supported by any 
evidence? Nope. Reframed people don’t think — others think for 
them and that’s the whole idea of reframing. I have seen police 
officers one after the other repeating without question word for 
word what officialdom tells them just as I have seen great swathes of 
the public doing the same. Ask either for ‘their’ opinion and out 
spews what they have been told to think by the official narrative. 
Police and public may seem to be in different groups, but their 
mentality is the same. Most people do whatever they are told in fear 
not doing so or because they believe what officialdom tells them; 
almost the entirety of the police do what they are told for the same 
reason. Ultimately it’s the tiny inner core of the global Cult that’s 
telling both what to do. 

So Derbyshire police were ‘horrified’. Oh, really? Why did they 
think those kids were playing football? It was to relieve the 
psychological consequences of lockdown and being denied human 
contact with their friends and interaction, touch and discourse vital 
to human psychological health. Being denied this month after month 
has dismantled the psyche of many children and young people as 
depression and suicide have exploded. Were Derbyshire police 
horrified by that? Are you kidding? Reframed people don’t have those 


mental and emotional processes that can see how the impact on the 
psychological health of youngsters is far more dangerous than any 
‘virus’ even if you take the mendacious official figures to be true. The 
reframed are told (programmed) how to act and so they do. The 
Derbyshire Chief Constable in the first period of lockdown when the 
black dye and drones nonsense was going on was Peter Goodman. 
He was the man who severed the connection between his force and 
the Derbyshire Constabulary Male Voice Choir when he decided that 
it was not inclusive enough to allow women to join. The fact it was a 
male voice choir making a particular sound produced by male voices 
seemed to elude a guy who terrifyingly ran policing in Derbyshire. 
He retired weeks after his force was condemned as disgraceful by 
former Supreme Court Justice Jonathan Sumption for their 
behaviour over extreme lockdown impositions. Goodman was 
replaced by his deputy Rachel Swann who was in charge when her 
officers were ‘horrified’. The police statement over the boys 
committing the hanging-offence of playing football included the line 
about the youngsters being ‘irresponsible in the times we are all 
living through’ missing the point that the real relevance of the ‘times 
we are all living through’ is the imposition of fascism enforced by 
psychopaths and reframed minds of police officers playing such a 
vital part in establishing the fascist tyranny that their own children 
and grandchildren will have to live in their entire lives. As a 
definition of insanity that is hard to beat although it might be run 
close by imposing masks on people that can have a serious effect on 
their health while wearing a face nappy all day themselves. Once 
again public and police do it for the same reason — the authorities tell 
them to and who are they to have the self-respect to say no? 


Wokers in uniform 

How reframed do you have to be to arrest a six-year-old and take him 
to court for picking a flower while waiting for a bus? Brain dead police 
and officialdom did just that in North Carolina where criminal 
proceedings happen regularly for children under nine. Attorney 
Julie Boyer gave the six-year-old crayons and a colouring book 


during the ‘flower’ hearing while the ‘adults’ decided his fate. 
County Chief District Court Judge Jay Corpening asked: ‘Should a 
child that believes in Santa Claus, the Easter Bunny and the tooth 
fairy be making life-altering decisions?’ Well, of course not, but 
common sense has no meaning when you have a common purpose 
and a reframed mind. Treating children in this way, and police 
operating in American schools, is all part of the psychological 
preparation for children to accept a police state as normal all their 
adult lives. The same goes for all the cameras and biometric tracking 
technology in schools. Police training is focused on reframing them 
as snowflake Wokers and this is happening in the military. Pentagon 
top brass said that ‘training sessions on extremism’ were needed for 
troops who asked why they were so focused on the Capitol Building 
riot when Black Lives Matter riots were ignored. What’s the 
difference between them some apparently and rightly asked. 
Actually, there is a difference. Five people died in the Capitol riot, 
only one through violence, and that was a police officer shooting an 
unarmed protestor. BLM riots killed at least 25 people and cost 
billions. Asking the question prompted the psychopaths and 
reframed minds that run the Pentagon to say that more ‘education’ 
(programming) was needed. Troop training is all based on 
psychological programming to make them fodder for the Cult — 
‘Military men are just dumb, stupid animals to be used as pawns in 
foreign policy’ as Cult-to-his-DNA former Secretary of State Henry 
Kissinger famously said. Governments see the police in similar terms 
and it’s time for those among them who can see this to defend the 
people and stop being enforcers of the Cult agenda upon the people. 
The US military, like the country itself, is being targeted for 
destruction through a long list of Woke impositions. Cult-owned 
gaga ‘President’ Biden signed an executive order when he took office 
to allow taxpayer money to pay for transgender surgery for active 
military personnel and veterans. Are you a man soldier? No, I’ma 
LGBTOQIA+ with a hint of Skoliosexual and Spectrasexual. Oh, good 
man. Bad choice of words you bigot. The Pentagon announced in 
March, 2021, the appointment of the first ‘diversity and inclusion 


officer’ for US Special Forces. Richard Torres-Estrada arrived with 
the publication of a ‘D&I Strategic Plan which will guide the 
enterprise-wide effort to institutionalize and sustain D&l’. If you 
think a Special Forces ‘Strategic Plan’ should have something to do 
with defending America you haven’t been paying attention. 
Defending Woke is now the military’s new role. Torres-Estrada has 
posted images comparing Donald Trump with Adolf Hitler and we 
can expect no bias from him as a representative of the supposedly 
non-political Pentagon. Cable news host Tucker Carlson said: ‘The 
Pentagon is now the Yale faculty lounge but with cruise missiles.’ 
Meanwhile Secretary of Defense Lloyd Austin, a board member of 
weapons-maker Raytheon with stock and compensation interests in 
October, 2020, worth $1.4 million, said he was purging the military 
of the ‘enemy within’ — anyone who isn’t Woke and supports Donald 
Trump. Austin refers to his targets as ‘racist extremists’ while in true 
Woke fashion being himself a racist extremist. Pentagon documents 
pledge to ‘eradicate, eliminate and conquer all forms of racism, 
sexism and homophobia’. The definitions of these are decided by 
‘diversity and inclusion committees’ peopled by those who see 
racism, sexism and homophobia in every situation and opinion. 
Woke (the Cult) is dismantling the US military and purging 
testosterone as China expands its military and gives its troops 
‘masculinity training’. How do we think that is going to end when 
this is all Cult coordinated? The US military, like the British military, 
is controlled by Woke and spineless top brass who just go along with 
it out of personal career interests. 


‘Woke’ means fast asleep 

Mind control and perception manipulation techniques used on 
individuals to create group-think have been unleashed on the global 
population in general. As a result many have no capacity to see the 
obvious fascist agenda being installed all around them or what 
‘Covid’ is really all about. Their brains are firewalled like a computer 
system not to process certain concepts, thoughts and realisations that 
are bad for the Cult. The young are most targeted as the adults they 


will be when the whole fascist global state is planned to be fully 
implemented. They need to be prepared for total compliance to 
eliminate all pushback from entire generations. The Cult has been 
pouring billions into taking complete control of ‘education’ from 
schools to universities via its operatives and corporations and not 
least Bill Gates as always. The plan has been to transform ‘education’ 
institutions into programming centres for the mentality of “Woke’. 
James McConnell, professor of psychology at the University of 
Michigan, wrote in Psychology Today in 1970: 


The day has come when we can combine sensory deprivation with drugs, hypnosis, and 
astute manipulation of reward and punishment, to gain almost absolute control over an 
individual’s behaviour. It should then be possible to achieve a very rapid and highly effective 
type of brainwashing that would allow us to make dramatic changes in a person’s behaviour 
and personality ... 


... We should reshape society so that we all would be trained from birth to want to do what 
society wants us to do. We have the techniques to do it... no-one owns his own personality 
you acquired, and there’s no reason to believe you should have the right to refuse to acquire a 
new personality if your old one is anti-social. 


This was the potential for mass brainwashing in 1970 and the 
mentality there displayed captures the arrogant psychopathy that 
drives it forward. I emphasise that not all young people have 
succumbed to Woke programming and those that haven’t are 
incredibly impressive people given that today’s young are the most 
perceptually-targeted generations in history with all the technology 
now involved. Vast swathes of the young generations, however, have 
fallen into the spell — and that’s what it is — of Woke. The Woke 
mentality and perceptual program is founded on inversion and you 
will appreciate later why that is so significant. Everything with Woke 
is inverted and the opposite of what it is claimed to be. Woke was a 
term used in African-American culture from the 1900s and referred 
to an awareness of social and racial justice. This is not the meaning 
of the modern version or ‘New Woke’ as I call it in The Answer. Oh, 
no, Woke today means something very different no matter how 
much Wokers may seek to hide that and insist Old Woke and New 


Woke are the same. See if you find any ‘awareness of social justice’ 
here in the modern variety: 


e¢ Woke demands ‘inclusivity’ while excluding anyone with a 
different opinion and calls for mass censorship to silence other 
views. 


e Woke claims to stand against oppression when imposing 
oppression is the foundation of all that it does. It is the driver of 
political correctness which is nothing more than a Cult invention 
to manipulate the population to silence itself. 


¢ Woke believes itself to be ‘liberal’ while pursuing a global society 
that can only be described as fascist (see ‘anti-fascist’ fascist 
Antifa). 


¢ Woke calls for ‘social justice’ while spreading injustice wherever it 
goes against the common ‘enemy’ which can be easily identified 
as a differing view. 


e Woke is supposed to be a metaphor for ‘awake’ when it is solid- 
gold asleep and deep in a Cult-induced coma that meets the 
criteria for ‘off with the fairies’. 


I state these points as obvious facts if people only care to look. I 
don’t do this with a sense of condemnation. We need to appreciate 
that the onslaught of perceptual programming on the young has 
been incessant and merciless. I can understand why so many have 
been reframed, or, given their youth, framed from the start to see the 
world as the Cult demands. The Cult has had access to their minds 
day after day in its ‘education’ system for their entire formative 
years. Perception is formed from information received and the Cult- 
created system is a life-long download of information delivered to 
elicit a particular perception, thus behaviour. The more this has 
expanded into still new extremes in recent decades and ever- 
increasing censorship has deleted other opinions and information 
why wouldn't that lead to a perceptual reframing on a mass scale? I 


have described already cradle-to-grave programming and in more 
recent times the targeting of young minds from birth to adulthood 
has entered the stratosphere. This has taken the form of skewing 
what is ‘taught’ to fit the Cult agenda and the omnipresent 
techniques of group-think to isolate non-believers and pressure them 
into line. There has always been a tendency to follow the herd, but 
we really are in anew world now in relation to that. We have parents 
who can see the ‘Covid’ hoax told by their children not to stop them 
wearing masks at school, being “Covid’ tested or having the ‘vaccine’ 
in fear of the peer-pressure consequences of being different. What is 
‘peer-pressure’ if not pressure to conform to group-think? Renegade 
Minds never group-think and always retain a set of perceptions that 
are unique to them. Group-think is always underpinned by 
consequences for not group-thinking. Abuse now aimed at those 
refusing DNA-manipulating ‘Covid vaccines’ are a potent example 
of this. The biggest pressure to conform comes from the very group 
which is itself being manipulated. ‘I am programmed to be part of a 
hive mind and so you must be.’ 


Woke control structures in ‘education’ now apply to every 
mainstream organisation. Those at the top of the ‘education’ 
hierarchy (the Cult) decide the policy. This is imposed on 
governments through the Cult network; governments impose it on 
schools, colleges and universities; their leadership impose the policy 
on teachers and academics and they impose it on children and 
students. At any level where there is resistance, perhaps from a 
teacher or university lecturer, they are targeted by the authorities 
and often fired. Students themselves regularly demand the dismissal 
of academics (increasingly few) at odds with the narrative that the 
students have been programmed to believe in. It is quite a thought 
that students who are being targeted by the Cult become so 
consumed by programmed group-think that they launch protests 
and demand the removal of those who are trying to push back 
against those targeting the students. Such is the scale of perceptual 
inversion. We see this with ‘Covid’ programming as the Cult 
imposes the rules via psycho-psychologists and governments on 


shops, transport companies and businesses which impose them on 
their staff who impose them on their customers who pressure 
Pushbackers to conform to the will of the Cult which is in the 
process of destroying them and their families. Scan all aspects of 
society and you will see the same sequence every time. 


Fact free Woke and hijacking the ‘left 

There is no more potent example of this than ‘Woke’, a mentality 
only made possible by the deletion of factual evidence by an 
‘education’ system seeking to produce an ever more uniform society. 
Why would you bother with facts when you don’t know any? 
Deletion of credible history both in volume and type is highly 
relevant. Orwell said: ‘Who controls the past controls the future: 
who controls the present controls the past.’ They who control the 
perception of the past control the perception of the future and they 
who control the present control the perception of the past through 
the writing and deleting of history. Why would you oppose the 
imposition of Marxism in the name of Wokeism when you don’t 
know that Marxism cost at least 100 million lives in the 20th century 
alone? Watch videos and read reports in which Woker generations 
are asked basic historical questions — it’s mind-blowing. A survey of 
2,000 people found that six percent of millennials (born 
approximately early1980s to early 2000s) believed the Second World 
War (1939-1945) broke out with the assassination of President 
Kennedy (in 1963) and one in ten thought Margaret Thatcher was 
British Prime Minister at the time. She was in office between 1979 
and 1990. We are in a post-fact society. Provable facts are no defence 
against the fascism of political correctness or Silicon Valley 
censorship. Facts don’t matter anymore as we have witnessed with 
the ‘Covid’ hoax. Sacrificing uniqueness to the Woke group-think 
religion is all you are required to do and that means thinking for 
yourself is the biggest Woke no, no. All religions are an expression of 
group-think and censorship and Woke is just another religion with 
an orthodoxy defended by group-think and censorship. Burned at 


the stake becomes burned on Twitter which leads back eventually to 
burned at the stake as Woke humanity regresses to ages past. 


The biggest Woke inversion of all is its creators and funders. I 
grew up in a traditional left of centre political household on a 
council estate in Leicester in the 1950s and 60s — you know, the left 
that challenged the power of wealth-hoarding elites and threats to 
freedom of speech and opinion. In those days students went on 
marches defending freedom of speech while today’s Wokers march 
for its deletion. What on earth could have happened? Those very 
elites (collectively the Cult) that we opposed in my youth and early 
life have funded into existence the antithesis of that former left and 
hijacked the ‘brand’ while inverting everything it ever stood for. We 
have a mentality that calls itself ‘liberal’ and ‘progressive’ while 
acting like fascists. Cult billionaires and their corporations have 
funded themselves into control of ‘education’ to ensure that Woke 
programming is unceasing throughout the formative years of 
children and young people and that non-Wokers are isolated (that 
word again) whether they be students, teachers or college professors. 
The Cult has funded into existence the now colossal global network 
of Woke organisations that have spawned and promoted all the 
‘causes’ on the Cult wish-list for global transformation and turned 
Wokers into demanders of them. Does anyone really think it’s a 
coincidence that the Cult agenda for humanity is a carbon (sorry) 
copy of the societal transformations desired by Woke?? These are 
only some of them: 


Political correctness: The means by which the Cult deletes all public 
debates that it knows it cannot win if we had the free-flow of 
information and evidence. 


Human-caused ‘climate change’: The means by which the Cult 
seeks to transform society into a globally-controlled dictatorship 
imposing its will over the fine detail of everyone’s lives ‘to save the 
planet’ which doesn’t actually need saving. 


Transgender obsession: Preparing collective perception to accept the 
‘new human’ which would not have genders because it would be 
created technologically and not through procreation. I'll have much 
more on this in Human 2.0. 


Race obsession: The means by which the Cult seeks to divide and 
rule the population by triggering racial division through the 
perception that society is more racist than ever when the opposite is 
the case. Is it perfect in that regard? No. But to compare today with 
the racism of apartheid and segregation brought to an end by the 
civil rights movement in the 1960s is to insult the memory of that 
movement and inspirations like Martin Luther King. Why is the 
‘anti-racism’ industry (which it is) so dominated by privileged white 
people? 


White supremacy: This is a label used by privileged white people to 
demonise poor and deprived white people pushing back on tyranny 
to marginalise and destroy them. White people are being especially 
targeted as the dominant race by number within Western society 
which the Cult seeks to transform in its image. If you want to change 
a society you must weaken and undermine its biggest group and 
once you have done that by using the other groups you next turn on 
them to do the same ... ‘Then they came for the Jews and I was not a 
Jew so I did nothing.’ 


Mass migration: The mass movement of people from the Middle 
East, Africa and Asia into Europe, from the south into the United 
States and from Asia into Australia are another way the Cult seeks to 
dilute the racial, cultural and political influence of white people on 
Western society. White people ask why their governments appear to 
be working against them while being politically and culturally 
biased towards incoming cultures. Well, here’s your answer. In the 
same way sexually ‘straight’ people, men and women, ask why the 


authorities are biased against them in favour of other sexualities. The 
answer is the same — that’s the way the Cult wants it to be for very 
sinister motives. 


These are all central parts of the Cult agenda and central parts of the 
Woke agenda and Woke was created and continues to be funded to 
an immense degree by Cult billionaires and corporations. If anyone 
begins to say ‘coincidence’ the syllables should stick in their throat. 


Billionaire ‘social justice warriors’ 

Joe Biden is a 100 percent-owned asset of the Cult and the Wokers’ 
man in the White House whenever he can remember his name and 
for however long he lasts with his rapidly diminishing cognitive 
function. Even walking up the steps of an aircraft without falling on 
his arse would appear to be a challenge. He’s not an empty-shell 
puppet or anything. From the minute Biden took office (or the Cult 
did) he began his executive orders promoting the Woke wish-list. 
You will see the Woke agenda imposed ever more severely because 
it’s really the Cult agenda. Woke organisations and activist networks 
spawned by the Cult are funded to the extreme so long as they 
promote what the Cult wants to happen. Woke is funded to promote 
‘social justice’ by billionaires who become billionaires by destroying 
social justice. The social justice mantra is only a cover for 
dismantling social justice and funded by billionaires that couldn't 
give a damn about social justice. Everything makes sense when you 
see that. One of Woke’s premier funders is Cult billionaire financier 
George Soros who said: ‘I am basically there to make money, I 
cannot and do not look at the social consequences of what I do.’ This 
is the same Soros who has given more than $32 billion to his Open 
Society Foundations global Woke network and funded Black Lives 
Matter, mass immigration into Europe and the United States, 
transgender activism, climate change activism, political correctness 
and groups targeting ‘white supremacy’ in the form of privileged 
white thugs that dominate Antifa. What a scam it all is and when 


you are dealing with the unquestioning fact-free zone of Woke 
scamming them is child’s play. All you need to pull it off in all these 
organisations are a few in-the-know agents of the Cult and an army 
of naive, reframed, uninformed, narcissistic, know-nothings 
convinced of their own self-righteousness, self-purity and virtue. 


Soros and fellow billionaires and billionaire corporations have 
poured hundreds of millions into Black Lives Matter and connected 
groups and promoted them to a global audience. None of this is 
motivated by caring about black people. These are the billionaires 
that have controlled and exploited a system that leaves millions of 
black people in abject poverty and deprivation which they do 
absolutely nothing to address. The same Cult networks funding 
BLM were behind the slave trade! Black Lives Matter hijacked a 
phrase that few would challenge and they have turned this laudable 
concept into a political weapon to divide society. You know that 
BLM is a fraud when it claims that Al] Lives Matter, the most 
inclusive statement of all, is ‘racist’. BLM and its Cult masters don’t 
want to end racism. To them it’s a means to an end to control all of 
humanity never mind the colour, creed, culture or background. 
What has destroying the nuclear family got to do with ending 
racism? Nothing — but that is one of the goals of BLM and also 
happens to be a goal of the Cult as I have been exposing in my books 
for decades. Stealing children from loving parents and giving 
schools ever more power to override parents is part of that same 
agenda. BLM is a Marxist organisation and why would that not be 
the case when the Cult created Marxism and BLM? Patrisse Cullors, a 
BLM co-founder, said in a 2015 video that she and her fellow 
organisers, including co-founder Alicia Garza, are ‘trained Marxists’. 
The lady known after marriage as Patrisse Khan-Cullors bought a 
$1.4 million home in 2021 in one of the whitest areas of California 
with a black population of just 1.6 per cent and has so far bought four 
high-end homes for a total of $3.2 million. How very Marxist. There 
must be a bit of spare in the BLM coffers, however, when Cult 
corporations and billionaires have handed over the best part of $100 
million. Many black people can see that Black Lives Matter is not 


working for them, but against them, and this is still more 
confirmation. Black journalist Jason Whitlock, who had his account 
suspended by Twitter for simply linking to the story about the 
‘Marxist’s’ home buying spree, said that BLM leaders are ‘making 
millions of dollars off the backs of these dead black men who they 
wouldn't spit on if they were on fire and alive’. 


Black Lies Matter 


Cult assets and agencies came together to promote BLM in the wake 
of the death of career criminal George Floyd who had been jailed a 
number of times including for forcing his way into the home of a 
black woman with others in a raid in which a gun was pointed at her 
stomach. Floyd was filmed being held in a Minneapolis street in 2020 
with the knee of a police officer on his neck and he subsequently 
died. It was an appalling thing for the officer to do, but the same 
technique has been used by police on peaceful protestors of 
lockdown without any outcry from the Woke brigade. As 
unquestioning supporters of the Cult agenda Wokers have 
supported lockdown and all the ‘Covid’ claptrap while attacking 
anyone standing up to the tyranny imposed in its name. Court 
documents would later include details of an autopsy on Floyd by 
County Medical Examiner Dr Andrew Baker who concluded that 
Floyd had taken a fatal level of the drug fentanyl. None of this 
mattered to fact-free, question-free, Woke. Floyd’s death was 
followed by worldwide protests against police brutality amid calls to 
defund the police. Throwing babies out with the bathwater is a 
Woke speciality. In the wake of the murder of British woman Sarah 
Everard a Green Party member of the House of Lords, Baroness 
Jones of Moulescoomb (Nincompoopia would have been better), 
called for a 6pm curfew for all men. This would be in breach of the 
Geneva Conventions on war crimes which ban collective 
punishment, but that would never have crossed the black and white 
Woke mind of Baroness Nincompoopia who would have been far 
too convinced of her own self-righteousness to compute such details. 
Many American cities did defund the police in the face of Floyd riots 


and after $15 million was deleted from the police budget in 
Washington DC under useless Woke mayor Muriel Bowser car- 
jacking alone rose by 300 percent and within six months the US 
capital recorded its highest murder rate in 15 years. The same 
happened in Chicago and other cities in line with the Cult/Soros 
plan to bring fear to streets and neighbourhoods by reducing the 
police, releasing violent criminals and not prosecuting crime. This is 
the mob-rule agenda that I have warned in the books was coming for 
so long. Shootings in the area of Minneapolis where Floyd was 
arrested increased by 2,500 percent compared with the year before. 
Defunding the police over George Floyd has led to a big increase in 
dead people with many of them black. Police protection for 
politicians making these decisions stayed the same or increased as 
you would expect from professional hypocrites. The Cult doesn’t 
actually want to abolish the police. It wants to abolish local control 
over the police and hand it to federal government as the 
psychopaths advance the Hunger Games Society. Many George 
Floyd protests turned into violent riots with black stores and 
businesses destroyed by fire and looting across America fuelled by 
Black Lives Matter. Woke doesn’t do irony. If you want civil rights 
you must loot the liquor store and the supermarket and make off 
with a smart TV. It’s the only way. 


It's not a race war - it's a class war 

Black people are patronised by privileged blacks and whites alike 
and told they are victims of white supremacy. I find it extraordinary 
to watch privileged blacks supporting the very system and bloodline 
networks behind the slave trade and parroting the same Cult-serving 
manipulative crap of their privileged white, often billionaire, 
associates. It is indeed not a race war but a class war and colour is 
just a diversion. Black Senator Cory Booker and black 
Congresswoman Maxine Waters, more residents of Nincompoopia, 
personify this. Once you tell people they are victims of someone else 
you devalue both their own responsibility for their plight and the 
power they have to impact on their reality and experience. Instead 


we have: ‘You are only in your situation because of whitey — turn on 
them and everything will change.’ It won’t change. Nothing changes 
in our lives unless we change it. Crucial to that is never seeing 
yourself as a victim and always as the creator of your reality. Life is a 
simple sequence of choice and consequence. Make different choices 
and you create different consequences. You have to make those 
choices — not Black Lives Matter, the Woke Mafia and anyone else 
that seeks to dictate your life. Who are they these Wokers, an 
emotional and psychological road traffic accident, to tell you what to 
do? Personal empowerment is the last thing the Cult and its Black 
Lives Matter want black people or anyone else to have. They claim to 
be defending the underdog while creating and perpetuating the 
underdog. The Cult’s worst nightmare is human unity and if they 
are going to keep blacks, whites and every other race under 
economic servitude and control then the focus must be diverted 
from what they have in common to what they can be manipulated to 
believe divides them. Blacks have to be told that their poverty and 
plight is the fault of the white bloke living on the street in the same 
poverty and with the same plight they are experiencing. The 
difference is that your plight black people is due to him, a white 
supremacist with ‘white privilege’ living on the street. Don’t unite as 
one human family against your mutual oppressors and suppressors 
— fight the oppressor with the white face who is as financially 
deprived as you are. The Cult knows that as its ‘Covid’ agenda 
moves into still new levels of extremism people are going to respond 
and it has been spreading the seeds of disunity everywhere to stop a 
united response to the evil that targets all of us. 


Racist attacks on ‘whiteness’ are getting ever more outrageous and 
especially through the American Democratic Party which has an 
appalling history for anti-black racism. Barack Obama, Joe Biden, 
Hillary Clinton and Nancy Pelosi all eulogised about Senator Robert 
Byrd at his funeral in 2010 after a nearly 60-year career in Congress. 
Byrd was a brutal Ku Klux Klan racist and a violent abuser of Cathy 
O’Brien in MKUltra. He said he would never fight in the military 
‘with a negro by my side’ and ‘rather I should die a thousand times, 


and see Old Glory trampled in the dirt never to rise again, than to 
see this beloved land of ours become degraded by race mongrels, a 
throwback to the blackest specimen from the wilds’. Biden called 
Byrd a ‘very close friend and mentor’. These ‘Woke’ hypocrites are 
not anti-racist they are anti-poor and anti-people not of their 
perceived class. Here is an illustration of the scale of anti-white 
racism to which we have now descended. Seriously Woke and 
moronic New York Times contributor Damon Young described 
whiteness as a ‘virus’ that ‘like other viruses will not die until there 
are no bodies left for it to infect’. He went on: ’... the only way to 
stop it is to locate it, isolate it, extract it, and kill it.’ Young can say 
that as a black man with no consequences when a white man saying 
the same in reverse would be facing a jail sentence. That’s racism. We 
had super-Woke numbskull senators Tammy Duckworth and Mazie 
Hirono saying they would object to future Biden Cabinet 
appointments if he did not nominate more Asian Americans and 
Pacific Islanders. Never mind the ability of the candidate what do 
they look like? Duckworth said: ‘I will vote for racial minorities and I 
will vote for LGBTQ, but anyone else I’m not voting for.’ Appointing 
people on the grounds of race is illegal, but that was not a problem 
for this ludicrous pair. They were on-message and that’s a free pass 
in any situation. 


White children are told at school they are intrinsically racist as they 
are taught the divisive ‘critical race theory’. This claims that the law 
and legal institutions are inherently racist and that race is a socially 
constructed concept used by white people to further their economic 
and political interests at the expense of people of colour. White is a 
‘virus’ as we've seen. Racial inequality results from ‘social, 
economic, and legal differences that white people create between 
races to maintain white interests which leads to poverty and 
criminality in minority communities’. I must tell that to the white 
guy sleeping on the street. The principal of East Side Community 
School in New York sent white parents a manifesto that called on 


them to become ‘white traitors’ and advocate for full “white 
abolition’. These people are teaching your kids when they urgently 
need a psychiatrist. The ‘school’ included a chart with ‘eight white 
identities’ that ranged from ‘white supremacist’ to ‘white abolition’ 
and defined the behaviour white people must follow to end ‘the 
regime of whiteness’. Woke blacks and their privileged white 
associates are acting exactly like the slave owners of old and Ku Klux 
Klan racists like Robert Byrd. They are too full of their own self- 
purity to see that, but it’s true. Racism is not a body type; it’s a state 
of mind that can manifest through any colour, creed or culture. 


Another racial fraud is ‘equity’. Not equality of treatment and 
opportunity — equity. It’s a term spun as equality when it means 
something very different. Equality in its true sense is a raising up 
while ‘equity’ is a race to the bottom. Everyone in the same level of 
poverty is ‘equity’. Keep everyone down - that’s equity. The Cult 
doesn’t want anyone in the human family to be empowered and 
BLM leaders, like all these ‘anti-racist’ organisations, continue their 
privileged, pampered existence by perpetuating the perception of 
gathering racism. When is the last time you heard an ‘anti-racist’ or 
‘anti-Semitism’ organisation say that acts of racism and 
discrimination have fallen? It’s not in the interests of their fund- 
raising and power to influence and the same goes for the 
professional soccer anti-racism operation, Kick It Out. Two things 
confirmed that the Black Lives Matter riots in the summer of 2020 
were Cult creations. One was that while anti-lockdown protests were 
condemned in this same period for ‘transmitting ‘Covid’ the 
authorities supported mass gatherings of Black Lives Matter 
supporters. I even saw self-deluding people claiming to be doctors 
say the two types of protest were not the same. No — the non-existent 
‘Covid’ was in favour of lockdowns and attacked those that 
protested against them while ‘Covid’ supported Black Lives Matter 
and kept well away from its protests. The whole thing was a joke 
and as lockdown protestors were arrested, often brutally, by 
reframed Face-Nappies we had the grotesque sight of police officers 
taking the knee to Black Lives Matter, a Cult-funded Marxist 


organisation that supports violent riots and wants to destroy the 
nuclear family and white people. 


He’s not white? Shucks! 

Woke obsession with race was on display again when ten people 
were shot dead in Boulder, Colorado, in March, 2021. Cult-owned 
Woke TV channels like CNN said the shooter appeared to be a white 
man and Wokers were on Twitter condemning ‘violent white men’ 
with the usual mantras. Then the shooter’s name was released as 
Ahmad Al Aliwi Alissa, an anti-Trump Arab-American, and the sigh 
of disappointment could be heard five miles away. Never mind that 
ten people were dead and what that meant for their families. Race 
baiting was all that mattered to these sick Cult-serving people like 
Barack Obama who exploited the deaths to further divide America 
on racial grounds which is his job for the Cult. This is the man that 
‘racist’ white Americans made the first black president of the United 
States and then gave him a second term. Not-very-bright Obama has 
become filthy rich on the back of that and today appears to have a 
big influence on the Biden administration. Even so he’s still a 
downtrodden black man and a victim of white supremacy. This 
disingenuous fraud reveals the contempt he has for black people 
when he puts on a Deep South Alabama accent whenever he talks to 
them, no, at them. 


Another BLM red flag was how the now fully-Woke (fully-Cult) 
and fully-virtue-signalled professional soccer authorities had their 
teams taking the knee before every match in support of Marxist 
Black Lives Matter. Soccer authorities and clubs displayed ‘Black 
Lives Matter’ on the players’ shirts and flashed the name on 
electronic billboards around the pitch. Any fans that condemned 
what is a Freemasonic taking-the-knee ritual were widely 
condemned as you would expect from the Woke virtue-signallers of 
professional sport and the now fully-Woke media. We have reverse 
racism in which you are banned from criticising any race or culture 
except for white people for whom anything goes — say what you like, 
no problem. What has this got to do with racial harmony and 


equality? We’ve had black supremacists from Black Lives Matter 
telling white people to fall to their knees in the street and apologise 
for their white supremacy. Black supremacists acting like white 
supremacist slave owners of the past couldn't breach their self- 
obsessed, race-obsessed sense of self-purity. Joe Biden appointed a 
race-obsessed black supremacist Kristen Clarke to head the Justice 
Department Civil Rights Division. Clarke claimed that blacks are 
endowed with ‘greater mental, physical and spiritual abilities’ than 
whites. If anyone reversed that statement they would be vilified. 
Clarke is on-message so no problem. She’s never seen a black-white 
situation in which the black figure is anything but a virtuous victim 
and she heads the Civil Rights Division which should treat everyone 
the same or it isn’t civil rights. Another perception of the Renegade 
Mind: If something or someone is part of the Cult agenda they will 
be supported by Woke governments and media no matter what. If 
they’re not, they will be condemned and censored. It really is that 
simple and so racist Clarke prospers despite (make that because of) 
her racism. 


The end of culture 


Biden’s administration is full of such racial, cultural and economic 
bias as the Cult requires the human family to be divided into 
watring factions. We are now seeing racially-segregated graduations 
and everything, but everything, is defined through the lens of 
perceived ‘racism. We have ‘racist’ mathematics, ‘racist’ food and 
even ‘racist’ plants. World famous Kew Gardens in London said it 
was changing labels on plants and flowers to tell its pre-‘Covid’ 
more than two million visitors a year how racist they are. Kew 
director Richard Deverell said this was part of an effort to “move 
quickly to decolonise collections’ after they were approached by one 
Ajay Chhabra ‘an actor with an insight into how sugar cane was 
linked to slavery’. They are plants you idiots. ‘Decolonisation’ in the 
Woke manual really means colonisation of society with its mentality 
and by extension colonisation by the Cult. We are witnessing a new 
Chinese-style ‘Cultural Revolution’ so essential to the success of all 


Marxist takeovers. Our cultural past and traditions have to be swept 
away to allow a new culture to be built-back-better. Woke targeting 
of long-standing Western cultural pillars including historical 
monuments and cancelling of historical figures is what happened in 
the Mao revolution in China which ‘purged remnants of capitalist 
and traditional elements from Chinese society’ and installed Maoism 
as the dominant ideology’. For China see the Western world today 
and for ‘dominant ideology’ see Woke. Better still see Marxism or 
Maoism. The ‘Covid’ hoax has specifically sought to destroy the arts 
and all elements of Western culture from people meeting in a pub or 
restaurant to closing theatres, music venues, sports stadiums, places 
of worship and even banning singing. Destruction of Western society 
is also why criticism of any religion is banned except for Christianity 
which again is the dominant religion as white is the numerically- 
dominant race. Christianity may be fading rapidly, but its history 
and traditions are weaved through the fabric of Western society. 
Delete the pillars and other structures will follow until the whole 
thing collapses. I am not a Christian defending that religion when I 
say that. I have no religion. It’s just a fact. To this end Christianity 
has itself been turned Woke to usher its own downfall and its ranks 
are awash with ‘change agents’ — knowing and unknowing — at 
every level including Pope Francis (definitely knowing) and the 
clueless Archbishop of Canterbury Justin Welby (possibly not, but 
who can be sure?). Woke seeks to coordinate attacks on Western 
culture, traditions, and ways of life through ‘intersectionality’ 
defined as ‘the complex, cumulative way in which the effects of 
multiple forms of discrimination (such as racism, sexism, and 
classism) combine, overlap, or intersect especially in the experiences 
of marginalised individuals or groups’. Wade through the Orwellian 
Woke-speak and this means coordinating disparate groups in a 
common cause to overthrow freedom and liberal values. 


The entire structure of public institutions has been infested with 
Woke — government at all levels, political parties, police, military, 
schools, universities, advertising, media and trade unions. This 
abomination has been achieved through the Cult web by appointing 


Wokers to positions of power and battering non-Wokers into line 
through intimidation, isolation and threats to their job. Many have 
been fired in the wake of the empathy-deleted, vicious hostility of 
‘social justice’ Wokers and the desire of gutless, spineless employers 
to virtue-signal their Wokeness. Corporations are filled with Wokers 
today, most notably those in Silicon Valley. Ironically at the top they 
are not Woke at all. They are only exploiting the mentality their Cult 
masters have created and funded to censor and enslave while the 
Wokers cheer them on until it’s their turn. Thus the Woke ‘liberal 
left’ is an inversion of the traditional liberal left. Campaigning for 
justice on the grounds of power and wealth distribution has been 
replaced by campaigning for identity politics. The genuine 
traditional left would never have taken money from today’s 
billionaire abusers of fairness and justice and nor would the 
billionaires have wanted to fund that genuine left. It would not have 
been in their interests to do so. The division of opinion in those days 
was between the haves and have nots. This all changed with Cult 
manipulated and funded identity politics. The division of opinion 
today is between Wokers and non-Wokers and not income brackets. 
Cult corporations and their billionaires may have taken wealth 
disparity to cataclysmic levels of injustice, but as long as they speak 
the language of Woke, hand out the dosh to the Woke network and 
censor the enemy they are ‘one of us’. Billionaires who don’t give a 
damn about injustice are laughing at them till their bellies hurt. 
Wokers are not even close to self-aware enough to see that. The 
transformed ‘left’ dynamic means that Wokers who drone on about 
‘social justice’ are funded by billionaires that have destroyed social 
justice the world over. It’s why they are billionaires. 


The climate con 

Nothing encapsulates what I have said more comprehensively than 
the hoax of human-caused global warming. I have detailed in my 
books over the years how Cult operatives and organisations were the 


pump-primers from the start of the climate con. A purpose-built 
vehicle for this is the Club of Rome established by the Cult in 1968 


with the Rockefellers and Rothschilds centrally involved all along. 
Their gofer frontman Maurice Strong, a Canadian oil millionaire, 
hosted the Earth Summit in Rio de Janeiro, Brazil, in 1992 where the 
global ‘green movement’ really expanded in earnest under the 
guiding hand of the Cult. The Earth Summit established Agenda 21 
through the Cult-created-and-owned United Nations to use the 
illusion of human-caused climate change to justify the 
transformation of global society to save the world from climate 
disaster. It is a No-Problem-Reaction-Solution sold through 
governments, media, schools and universities as whole generations 
have been terrified into believing that the world was going to end in 
their lifetimes unless what old people had inflicted upon them was 
stopped by a complete restructuring of how everything is done. 
Chill, kids, it’s all a hoax. Such restructuring is precisely what the 
Cult agenda demands (purely by coincidence of course). Today this 
has been given the codename of the Great Reset which is only an 
updated term for Agenda 21 and its associated Agenda 2030. The 
latter, too, is administered through the UN and was voted into being 
by the General Assembly in 2015. Both 21 and 2030 seek centralised 
control of all resources and food right down to the raindrops falling 
on your own land. These are some of the demands of Agenda 21 
established in 1992. See if you recognise this society emerging today: 


e End national sovereignty 

e State planning and management of all land resources, ecosystems, 
deserts, forests, mountains, oceans and fresh water; agriculture; 
rural development; biotechnology; and ensuring ‘equity’ 

e The state to ‘define the role’ of business and financial resources 

e Abolition of private property 

e ‘Restructuring’ the family unit (see BLM) 

¢ Children raised by the state 

¢ People told what their job will be 

e Major restrictions on movement 

¢ Creation of ‘human settlement zones’ 


e Mass resettlement as people are forced to vacate land where they 
live 

e Dumbing down education 

¢ Mass global depopulation in pursuit of all the above 


The United Nations was created as a Trojan horse for world 
government. With the climate con of critical importance to 
promoting that outcome you would expect the UN to be involved. 
Oh, it’s involved all right. The UN is promoting Agenda 21 and 
Agenda 2030 justified by ‘climate change’ while also driving the 
climate hoax through its Intergovernmental Panel on Climate 
Change (IPCC), one of the world’s most corrupt organisations. The 
IPCC has been lying ferociously and constantly since the day it 
opened its doors with the global media hanging unquestioningly on 
its every mendacious word. The Green movement is entirely Woke 
and has long lost its original environmental focus since it was co- 
opted by the Cult. An obsession with ‘global warming’ has deleted 
its values and scrambled its head. I experienced a small example of 
what I mean on a beautiful country walk that I have enjoyed several 
times a week for many years. The path merged into the fields and 
forests and you felt at one with the natural world. Then a ‘Green’ 
organisation, the Hampshire and Isle of Wight Wildlife Trust, took 
over part of the land and proceeded to cut down a large number of 
trees, including mature ones, to install a horrible big, bright steel 
‘this-is-ours-stay-out’ fence that destroyed the whole atmosphere of 
this beautiful place. No one with a feel for nature would do that. Day 
after day I walked to the sound of chainsaws and a magnificent 
mature weeping willow tree that Iso admired was cut down at the 
base of the trunk. When I challenged a Woke young girl in a green 
shirt (of course) about this vandalism she replied: ‘It’s a weeping 
willow — it will grow back.’ This is what people are paying for when 
they donate to the Hampshire and Isle of Wight Wildlife Trust and 
many other ‘green’ organisations today. It is not the environmental 
movement that I knew and instead has become a support-system — 
as with Extinction Rebellion — for a very dark agenda. 


Private jets for climate justice 

The Cult-owned, Gates-funded, World Economic Forum and its 
founder Klaus Schwab were behind the emergence of Greta 
Thunberg to harness the young behind the climate agenda and she 
was invited to speak to the world at ... the UN. Schwab published a 
book, Covid-19: The Great Reset in 2020 in which he used the ‘Covid’ 
hoax and the climate hoax to lay out a new society straight out of 
Agenda 21 and Agenda 2030. Bill Gates followed in early 2021 when 
he took time out from destroying the world to produce a book in his 
name about the way to save it. Gates flies across the world in private 
jets and admitted that ‘I probably have one of the highest 
greenhouse gas footprints of anyone on the planet ... my personal 
flying alone is gigantic.’ He has also bid for the planet’s biggest 
private jet operator. Other climate change saviours who fly in private 
jets include John Kerry, the US Special Presidential Envoy for 
Climate, and actor Leonardo DiCaprio, a ‘UN Messenger of Peace 
with special focus on climate change’. These people are so full of 
bullshit they could corner the market in manure. We mustn't be 
sceptical, though, because the Gates book, How to Avoid a Climate 
Disaster: The Solutions We Have and the Breakthroughs We Need, is a 
genuine attempt to protect the world and not an obvious pile of 
excrement attributed to a mega-psychopath aimed at selling his 
masters’ plans for humanity. The Gates book and the other shite-pile 
by Klaus Schwab could have been written by the same person and 
may well have been. Both use ‘climate change’ and ‘Covid’ as the 
excuses for their new society and by coincidence the Cult’s World 
Economic Forum and Bill and Melinda Gates Foundation promote 
the climate hoax and hosted Event 201 which pre-empted with a 
‘simulation’ the very ‘coronavirus’ hoax that would be simulated for 
real on humanity within weeks. The British ‘royal’ family is 
promoting the ‘Reset’ as you would expect through Prince ‘climate 
change caused the war in Syria’ Charles and his hapless son Prince 
William who said that we must ‘reset our relationship with nature 
and our trajectory as a species’ to avoid a climate disaster. Amazing 
how many promotors of the ‘Covid’ and ‘climate change’ control 


systems are connected to Gates and the World Economic Forum. A 
‘study’ in early 2021 claimed that carbon dioxide emissions must fall 
by the equivalent of a global lockdown roughly every two years for 
the next decade to save the planet. The ‘study’ appeared in the same 
period that the Schwab mob claimed in a video that lockdowns 
destroying the lives of billions are good because they make the earth 
‘quieter’ with less ‘ambient noise’. They took down the video amid a 
public backlash for such arrogant, empathy-deleted stupidity You 
see, however, where they are going with this. Corinne Le Quéré, a 
professor at the Tyndall Centre for Climate Change Research, 
University of East Anglia, was lead author of the climate lockdown 
study, and she writes for ... the World Economic Forum. Gates calls 
in ‘his’ book for changing ‘every aspect of the economy’ (long-time 
Cult agenda) and for humans to eat synthetic ‘meat’ (predicted in 
my books) while cows and other farm animals are eliminated. 
Australian TV host and commentator Alan Jones described what 
carbon emission targets would mean for farm animals in Australia 
alone if emissions were reduced as demanded by 35 percent by 2030 
and zero by 2050: 


Well, let’s take agriculture, the total emissions from agriculture are about 75 million tonnes of 
carbon dioxide, equivalent. Now reduce that by 35 percent and you have to come down to 
50 million tonnes, I’ve done the maths. So if you take for example 1.5 million cows, you’re 
going to have to reduce the herd by 525,000 [by] 2030, nine years, that’s 58,000 cows a year. 
The beef herd’s 30 million, reduce that by 35 percent, that’s 10.5 million, which means 1.2 
million cattle have to go every year between now and 2030. This is insanity! 


There are 75 million sheep. Reduce that by 35 percent, that’s 26 million sheep, that’s almost 3 
million a year. So under the Paris Agreement over 30 million beasts. dairy cows, cattle, pigs 
and sheep would go. More than 8,000 every minute of every hour for the next decade, do 
these people know what they’re talking about? 


Clearly they don’t at the level of campaigners, politicians and 
administrators. The Cult does know; that’s the outcome it wants. We 
are faced with not just a war on humanity. Animals and the natural 
world are being targeted and I have been saying since the “Covid’ 
hoax began that the plan eventually was to claim that the ‘deadly 
virus’ is able to jump from animals, including farm animals and 


domestic pets, to humans. Just before this book went into production 
came this story: ‘Russia registers world’s first Covid-19 vaccine for 
cats & dogs as makers of Sputnik V warn pets & farm animals could 
spread virus’. The report said ‘top scientists warned that the deadly 
pathogen could soon begin spreading through homes and farms’ 
and ‘the next stage is the infection of farm and domestic animals’. 
Know the outcome and you'll see the journey. Think what that 
would mean for animals and keep your eye on a term called 
zoonosis or zoonotic diseases which transmit between animals and 
humans. The Cult wants to break the connection between animals 
and people as it does between people and people. Farm animals fit 
with the Cult agenda to transform food from natural to synthetic. 


The gas of life is killing us 

There can be few greater examples of Cult inversion than the 
condemnation of carbon dioxide as a dangerous pollutant when it is 
the gas of life. Without it the natural world would be dead and so we 
would all be dead. We breathe in oxygen and breathe out carbon 
dioxide while plants produce oxygen and absorb carbon dioxide. It 
is a perfect symbiotic relationship that the Cult wants to dismantle 
for reasons I will come to in the final two chapters. Gates, Schwab, 
other Cult operatives and mindless repeaters, want the world to be 
‘carbon neutral’ by at least 2050 and the earlier the better. ‘Zero 
carbon’ is the cry echoed by lunatics calling for ‘Zero Covid’ when 
we already have it. These carbon emission targets will 
deindustrialise the world in accordance with Cult plans — the post- 
industrial, post-democratic society — and with so-called renewables 
like solar and wind not coming even close to meeting human energy 
needs blackouts and cold are inevitable. Texans got the picture in the 
winter of 2021 when a snow storm stopped wind turbines and solar 
panels from working and the lights went down along with water 
which relies on electricity for its supply system. Gates wants 
everything to be powered by electricity to ensure that his masters 
have the kill switch to stop all human activity, movement, cooking, 
water and warmth any time they like. The climate lie is so 


stupendously inverted that it claims we must urgently reduce 
carbon dioxide when we don’t have enough. 

Co2 in the atmosphere is a little above 400 parts per million when 
the optimum for plant growth is 2,000 ppm and when it falls 
anywhere near 150 ppm the natural world starts to die and so do we. 
It fell to as low as 280 ppm in an 1880 measurement in Hawaii and 
rose to 413 ppm in 2019 with industrialisation which is why the 
planet has become greener in the industrial period. How insane then 
that psychopathic madman Gates is not satisfied only with blocking 
the rise of Co2. He’s funding technology to suck it out of the 
atmosphere. The reason why will become clear. The industrial era is 
not destroying the world through Co2 and has instead turned 
around a potentially disastrous ongoing fall in Co2. Greenpeace co- 
founder and scientist Patrick Moore walked away from Greenpeace 
in 1986 and has exposed the green movement for fear-mongering 
and lies. He said that 500 million years ago there was 17 times more 
Co2 in the atmosphere than we have today and levels have been 
falling for hundreds of millions of years. In the last 150 million years 
Co2 levels in Earth’s atmosphere had reduced by 90 percent. Moore 
said that by the time humanity began to unlock carbon dioxide from 
fossil fuels we were at ‘38 seconds to midnight’ and in that sense: 
‘Humans are [the Earth’s] salvation.’ Moore made the point that only 
half the Co2 emitted by fossil fuels stays in the atmosphere and we 
should remember that all pollution pouring from chimneys that we 
are told is carbon dioxide is in fact nothing of the kind. It’s pollution. 
Carbon dioxide is an invisible gas. 


William Happer, Professor of Physics at Princeton University and 
long-time government adviser on climate, has emphasised the Co2 
deficiency for maximum growth and food production. Greenhouse 
growers don’t add carbon dioxide for a bit of fun. He said that most 
of the warming in the last 100 years, after the earth emerged from 
the super-cold period of the ‘Little Ice Age’ into a natural warming 
cycle, was over by 1940. Happer said that a peak year for warming in 
1988 can be explained by a ‘monster El Nino’ which is a natural and 
cyclical warming of the Pacific that has nothing to do with ‘climate 


change’. He said the effect of Co2 could be compared to painting a 
wall with red paint in that once two or three coats have been applied 
it didn’t matter how much more you slapped on because the wall 
will not get much redder. Almost all the effect of the rise in Co2 has 
already happened, he said, and the volume in the atmosphere would 
now have to double to increase temperature by a single degree. 
Climate hoaxers know this and they have invented the most 
ridiculously complicated series of ‘feedback’ loops to try to 
overcome this rather devastating fact. You hear puppet Greta going 
on cluelessly about feedback loops and this is why. 


The Sun affects temperature? No you climate denier 

Some other nonsense to contemplate: Climate graphs show that rises 
in temperature do not follow rises in Co2 — it’s the other way round 
with a lag between the two of some 800 years. If we go back 800 
years from present time we hit the Medieval Warm Period when 
temperatures were higher than now without any industrialisation 
and this was followed by the Little Ice Age when temperatures 
plummeted. The world was still emerging from these centuries of 
serious cold when many climate records began which makes the 
ever-repeated line of the ‘hottest year since records began’ 
meaningless when you are not comparing like with like. The coldest 
period of the Little Ice Age corresponded with the lowest period of 
sunspot activity when the Sun was at its least active. Proper 
scientists will not be at all surprised by this when it confirms the 
obvious fact that earth temperature is affected by the scale of Sun 
activity and the energetic power that it subsequently emits; but 
when is the last time you heard a climate hoaxer talking about the 
Sun as a source of earth temperature?? Everything has to be focussed 
on Co2 which makes up just 0.117 percent of so-called greenhouse 
gases and only a fraction of even that is generated by human activity. 
The rest is natural. More than 90 percent of those greenhouse gases 
are water vapour and clouds (Fig 9). Ban moisture I say. Have you 
noticed that the climate hoaxers no longer use the polar bear as their 
promotion image? That’s because far from becoming extinct polar 


bear communities are stable or thriving. Joe Bastardi, American 
meteorologist, weather forecaster and outspoken critic of the climate 
lie, documents in his book The Climate Chronicles how weather 
patterns and events claimed to be evidence of climate change have 
been happening since long before industrialisation: ‘What happened 
before naturally is happening again, as is to be expected given the 
cyclical nature of the climate due to the design of the planet.’ If you 
read the detailed background to the climate hoax in my other books 
you will shake your head and wonder how anyone could believe the 
crap which has spawned a multi-trillion dollar industry based on 
absolute garbage (see HIV causes AIDs and Sars-Cov-2 causes 
‘Covid-19’). Climate and ‘Covid’ have much in common given they 
have the same source. They both have the contradictory everything 
factor in which everything is explained by reference to them. It’s hot 
— ‘it’s climate change’. It’s cold — ‘it’s climate change’. I got a sniffle — 
‘it’s Covid’. I haven’t got a sniffle — ‘it’s Covid’. Not having a sniffle 
has to be a symptom of ‘Covid’. Everything is and not having a 
sniffle is especially dangerous if you are a slow walker. For sheer 
audacity I offer you a Cambridge University ‘study’ that actually 
linked ‘Covid’ to ‘climate change’. It had to happen eventually. They 
concluded that climate change played a role in ‘Covid-19’ spreading 
from animals to humans because ... wait for it ... [kid you not ... the 
two groups were forced closer together as populations grow. Er, that’s it. 
The whole foundation on which this depended was that ‘Bats are the 
likely zoonotic origin of SARS-CoV-1 and SARS-CoV-2’. Well, they 
are not. They are nothing to do with it. Apart from bats not being the 
origin and therefore ‘climate change’ effects on bats being irrelevant 
I am in awe of their academic insight. Where would we be without 
them? Not where we are that’s for sure. 
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Figure 9: The idea that the gas of life is disastrously changing the climate is an insult to brain 
cell activity. 


One other point about the weather is that climate modification is 
now well advanced and not every major weather event is natural — 
or earthquake come to that. I cover this subject at some length in 
other books. China is openly planning a rapid expansion of its 
weather modification programme which includes changing the 
climate in an area more than one and a half times the size of India. 
China used weather manipulation to ensure clear skies during the 
2008 Olympics in Beijing. I have quoted from US military documents 
detailing how to employ weather manipulation as a weapon of war 
and they did that in the 1960s and 70s during the conflict in Vietnam 
with Operation Popeye manipulating monsoon rains for military 
purposes. Why would there be international treaties on weather 
modification if it wasn’t possible? Of course it is. Weather is 
energetic information and it can be changed. 


How was the climate hoax pulled off? See ‘Covid’ 

If you can get billions to believe in a ‘virus’ that doesn’t exist you can 
get them to believe in human-caused climate change that doesn’t 
exist. Both are being used by the Cult to transform global society in 
the way it has long planned. Both hoaxes have been achieved in 
pretty much the same way. First you declare a lie is a fact. There’s a 


‘virus’ you call SARS-Cov-2 or humans are warming the planet with 
their behaviour. Next this becomes, via Cult networks, the 
foundation of government, academic and science policy and belief. 
Those who parrot the mantra are given big grants to produce 
research that confirms the narrative is true and ever more 
‘symptoms’ are added to make the ‘virus’/’climate change’ sound 
even more scary. Scientists and researchers who challenge the 
narrative have their grants withdrawn and their careers destroyed. 
The media promote the lie as the unquestionable truth and censor 
those with an alternative view or evidence. A great percentage of the 
population believe what they are told as the lie becomes an 
everybody-knows-that and the believing-masses turn on those with 
a mind of their own. The technique has been used endlessly 
throughout human history. Wokers are the biggest promotors of the 
climate lie and ‘Covid’ fascism because their minds are owned by the 
Cult; their sense of self-righteous self-purity knows no bounds; and 
they exist in a bubble of reality in which facts are irrelevant and only 
get in the way of looking without seeing. 


Running through all of this like veins in a blue cheese is control of 
information, which means control of perception, which means 
control of behaviour, which collectively means control of human 
society. The Cult owns the global media and Silicon Valley fascists 
for the simple reason that it has to. Without control of information it 
can’t control perception and through that human society. Examine 
every facet of the Cult agenda and you will see that anything 
supporting its introduction is never censored while anything 
pushing back is always censored. I say again: Psychopaths that know 
why they are doing this must go before Nuremberg trials and those 
that follow their orders must trot along behind them into the same 
dock. ‘I was just following orders’ didn’t work the first time and it 
must not work now. Nuremberg trials must be held all over the 
world before public juries for politicians, government officials, 
police, compliant doctors, scientists and virologists, and all Cult 
operatives such as Gates, Tedros, Fauci, Vallance, Whitty, Ferguson, 
Zuckerberg, Wojcicki, Brin, Page, Dorsey, the whole damn lot of 


them -— including, no especially, the psychopath psychologists. 
Without them and the brainless, gutless excuses for journalists that 
have repeated their lies, none of this could be happening. Nobody 
can be allowed to escape justice for the psychological and economic 
Armageddon they are all responsible for visiting upon the human 
race. 

As for the compliant, unquestioning, swathes of humanity, and the 
self-obsessed, all-knowing ignorance of the Wokers ... don’t start me. 
God help their kids. God help their grandkids. God help them. 


CHAPTER NINE 
We must have it? So what is it? 


Well I won’t back down. No, I won’t back down. You can stand me 
up at the Gates of Hell. But | won’t back down 
Tom Petty 


will now focus on the genetically-manipulating ‘Covid vaccines’ 

which do not meet this official definition of a vaccine by the US 
Centers for Disease Control (CDC): ‘A product that stimulates a 
person’s immune system to produce immunity to a specific disease, 
protecting the person from that disease.’ On that basis ‘Covid 
vaccines’ are not a vaccine in that the makers don’t even claim they 
stop infection or transmission. 


They are instead part of a multi-levelled conspiracy to change the 
nature of the human body and what it means to be ‘human’ and to 
depopulate an enormous swathe of humanity. What I shall call 
Human 1.0 is on the cusp of becoming Human 2.0 and for very 
sinister reasons. Before I get to the ‘Covid vaccine’ in detail here’s 
some background to vaccines in general. Government regulators do 
not test vaccines — the makers do — and the makers control which 
data is revealed and which isn’t. Children in America are given 50 
vaccine doses by age six and 69 by age 19 and the effect of the whole 
combined schedule has never been tested. Autoimmune diseases 
when the immune system attacks its own body have soared in the 
mass vaccine era and so has disease in general in children and the 
young. Why wouldn't this be the case when vaccines target the 
immune system? The US government gave Big Pharma drug 


companies immunity from prosecution for vaccine death and injury 
in the 1986 National Childhood Vaccine Injury Act (NCVIA) and 
since then the government (taxpayer) has been funding 
compensation for the consequences of Big Pharma vaccines. The 
criminal and satanic drug giants can’t lose and the vaccine schedule 
has increased dramatically since 1986 for this reason. There is no 
incentive to make vaccines safe and a big incentive to make money 
by introducing ever more. Even against a ridiculously high bar to 
prove vaccine liability, and with the government controlling the 
hearing in which it is being challenged for compensation, the vaccine 
court has so far paid out more than $4 billion. These are the vaccines 
we are told are safe and psychopaths like Zuckerberg censor posts 
saying otherwise. The immunity law was even justified by a ruling 
that vaccines by their nature were ‘unavoidably unsafe’. 

Check out the ingredients of vaccines and you will be shocked if 
you are new to this. They put that in children’s bodies?? What?? Try 
aluminium, a brain toxin connected to dementia, aborted foetal 
tissue and formaldehyde which is used to embalm corpses. World- 
renowned aluminium expert Christopher Exley had his research into 
the health effect of aluminium in vaccines shut down by Keele 
University in the UK when it began taking funding from the Bill and 
Melinda Gates Foundation. Research when diseases ‘eradicated’ by 
vaccines began to decline and you will find the fall began long before 
the vaccine was introduced. Sometimes the fall even plateaued after 
the vaccine. Diseases like scarlet fever for which there was no 
vaccine declined in the same way because of environmental and 
other factors. A perfect case in point is the polio vaccine. Polio began 
when lead arsenate was first sprayed as an insecticide and residues 
remained in food products. Spraying started in 1892 and the first US 
polio epidemic came in Vermont in 1894. The simple answer was to 
stop spraying, but Rockefeller-created Big Pharma had a better idea. 
Polio was decreed to be caused by the poliovirus which ‘spreads from 
person to person and can infect a person’s spinal cord’. Lead 
arsenate was replaced by the lethal DDT which had the same effect 
of causing paralysis by damaging the brain and central nervous 


system. Polio plummeted when DDT was reduced and then banned, 
but the vaccine is still given the credit for something it didn’t do. 
Today by far the biggest cause of polio is the vaccines promoted by 
Bill Gates. Vaccine justice campaigner Robert Kennedy Jr, son of 
assassinated (by the Cult) US Attorney General Robert Kennedy, 
wrote: 


In 2017, the World Health Organization (WHO) reluctantly admitted that the global explosion 
in polio is predominantly vaccine strain. The most frightening epidemics in Congo, 
Afghanistan, and the Philippines, are all linked to vaccines. In fact, by 2018, 70% of global 
polio cases were vaccine strain. 


Vaccines make fortunes for Cult-owned Gates and Big Pharma 
while undermining the health and immune systems of the 
population. We had a glimpse of the mentality behind the Big 
Pharma cartel with a report on WION (World is One News), an 
international English language TV station based in India, which 
exposed the extraordinary behaviour of US drug company Pfizer 
over its ‘Covid vaccine’. The WION report told how Pfizer had made 
fantastic demands of Argentina, Brazil and other countries in return 
for its ‘vaccine’. These included immunity from prosecution, even 
for Pfizer negligence, government insurance to protect Pfizer from 
law suits and handing over as collateral sovereign assets of the 
country to include Argentina’s bank reserves, military bases and 
embassy buildings. Pfizer demanded the same of Brazil in the form 
of waiving sovereignty of its assets abroad; exempting Pfizer from 
Brazilian laws; and giving Pfizer immunity from all civil liability. 
This is a ‘vaccine’ developed with government funding. Big Pharma 
is evil incarnate as a creation of the Cult and all must be handed 
tickets to Nuremberg. 


Phantom ‘vaccine’ for a phantom ‘disease’ 

I’ll expose the ‘Covid vaccine’ fraud and then go on to the wider 
background of why the Cult has set out to ‘vaccinate’ every man, 
woman and child on the planet for an alleged ‘new disease’ with a 
survival rate of 99.77 percent (or more) even by the grotesquely- 


manipulated figures of the World Health Organization and Johns 
Hopkins University. The ‘infection’ to ‘death’ ratio is 0.23 to 0.15 
percent according to Stanford epidemiologist Dr John Ioannidis and 
while estimates vary the danger remains tiny. I say that if the truth 
be told the fake infection to fake death ratio is zero. Never mind all 
the evidence I have presented here and in The Answer that there is no 
‘virus’ let us just focus for a moment on that death-rate figure of say 
0.23 percent. The figure includes all those worldwide who have 
tested positive with a test not testing for the ‘virus’ and then died 
within 28 days or even longer of any other cause — any other cause. 
Now subtract all those illusory ‘Covid’ deaths on the global data 
sheets from the 0.23 percent. What do you think you would be left 
with? Zero. A vaccination has never been successfully developed for 
a so-called coronavirus. They have all failed at the animal testing 
stage when they caused hypersensitivity to what they were claiming 
to protect against and made the impact of a disease far worse. Cult- 
owned vaccine corporations got around that problem this time by 
bypassing animal trials, going straight to humans and making the 
length of the ‘trials’ before the public rollout as short as they could 
get away with. Normally it takes five to ten years or more to develop 
vaccines that still cause demonstrable harm to many people and 
that’s without including the long-term effects that are never officially 
connected to the vaccination. ‘Covid’ non-vaccines have been 
officially produced and approved in a matter of months from a 
standing start and part of the reason is that (a) they were developed 
before the ‘Covid’ hoax began and (b) they are based on computer 
programs and not natural sources. Official non-trials were so short 
that government agencies gave emergency, not full, approval. ‘Trials’ 
were not even completed and full approval cannot be secured until 
they are. Public ‘Covid vaccination’ is actually a continuation of the 
trial. Drug company ‘trials’ are not scheduled to end until 2023 by 
which time a lot of people are going to be dead. Data on which 
government agencies gave this emergency approval was supplied by 
the Big Pharma corporations themselves in the form of 
Pfizer/BioNTech, AstraZeneca, Moderna, Johnson & Johnson, and 


others, and this is the case with all vaccines. By its very nature 
emergency approval means drug companies do not have to prove that 
the ‘vaccine’ is ‘safe and effective’. How could they with trials way 
short of complete? Government regulators only have to believe that 
they could be safe and effective. It is criminal manipulation to get 
products in circulation with no testing worth the name. Agencies 
giving that approval are infested with Big Pharma-connected place- 
people and they act in the interests of Big Pharma (the Cult) and not 
the public about whom they do not give a damn. 


More human lab rats 

‘Covid vaccines’ produced in record time by Pfizer/BioNTech and 
Moderna employ a technique never approved before for use on humans. 
They are known as mRNA ‘vaccines’ and inject a synthetic version of 
‘viral’ mRNA or ‘messenger RNA’. The key is in the term 
‘messenger’. The body works, or doesn’t, on the basis of information 
messaging. Communications are constantly passing between and 
within the genetic system and the brain. Change those messages and 
you change the state of the body and even its very nature and you 
can change psychology and behaviour by the way the brain 
processes information. I think you are going to see significant 
changes in personality and perception of many people who have had 
the ‘Covid vaccine’ synthetic potions. Insider Aldous Huxley 
predicted the following in 1961 and mRNA ‘vaccines’ can be 
included in the term ‘pharmacological methods’: 


There will be, in the next generation or so, a pharmacological method of making people love 
their servitude, and producing dictatorship without tears, so to speak, producing a kind of 
painless concentration camp for entire societies, so that people will in fact have their own 
liberties taken away from them, but rather enjoy it, because they will be distracted from any 
desire to rebel by propaganda or brainwashing, or brainwashing enhanced by 
pharmacological methods. And this seems to be the final revolution. 


Apologists claim that mRNA synthetic ‘vaccines’ don’t change the 
DNA genetic blueprint because RNA does not affect DNA only the 
other way round. This is so disingenuous. A process called ‘reverse 


transcription’ can convert RNA into DNA and be integrated into 
DNA in the cell nucleus. This was highlighted in December, 2020, by 
scientists at Harvard and Massachusetts Institute of Technology 
(MIT). Geneticists report that more than 40 percent of mammalian 
genomes results from reverse transcription. On the most basic level 
if messaging changes then that sequence must lead to changes in 
DNA which is receiving and transmitting those communications. 
How can introducing synthetic material into cells not change the 
cells where DNA is located? The process is known as transfection 
which is defined as ‘a technique to insert foreign nucleic acid (DNA 
or RNA) into a cell, typically with the intention of altering the 
properties of the cell’. Researchers at the Sloan Kettering Institute in 
New York found that changes in messenger RNA can deactivate 
tumour-suppressing proteins and thereby promote cancer. This is 
what happens when you mess with messaging. ‘Covid vaccine’ 
maker Moderna was founded in 2010 by Canadian stem cell 
biologist Derrick J. Rossi after his breakthrough discovery in the field 
of transforming and reprogramming stem cells. These are neutral 
cells that can be programmed to become any cell including sperm 
cells. Moderna was therefore founded on the principle of genetic 
manipulation and has never produced any vaccine or drug before its 
genetically-manipulating synthetic ‘Covid’ shite. Look at the name — 
Mode-RNA or Modify-RNA. Another important point is that the US 
Supreme Court has ruled that genetically-modified DNA, or 
complementary DNA (cDNA) synthesized in the laboratory from 
messenger RNA, can be patented and owned. These psychopaths are 
doing this to the human body. 

Cells replicate synthetic mRNA in the ‘Covid vaccines’ and in 
theory the body is tricked into making antigens which trigger 
antibodies to target the ‘virus spike proteins’ which as Dr Tom 
Cowan said have never been seen. Cut the crap and these ‘vaccines’ 
deliver self-replicating synthetic material to the cells with the effect of 
changing human DNA. The more of them you have the more that 
process is compounded while synthetic material is all the time self- 
replicating. ‘Vaccine’-maker Moderna describes mRNA as ‘like 


software for the cell’ and so they are messing with the body’s 
software. What happens when you change the software in a 
computer? Everything changes. For this reason the Cult is preparing 
a production line of mRNA ‘Covid vaccines’ and a long list of 
excuses to use them as with all the ‘variants’ of a ‘virus’ never shown 
to exist. The plan is further to transfer the mRNA technique to other 
vaccines mostly given to children and young people. The cumulative 
consequences will be a transformation of human DNA through a 
constant infusion of synthetic genetic material which will kill many 
and change the rest. Now consider that governments that have given 
emergency approval for a vaccine that’s not a vaccine; never been 
approved for humans before; had no testing worth the name; and 
the makers have been given immunity from prosecution for any 
deaths or adverse effects suffered by the public. The UK government 
awarded permanent legal indemnity to itself and its employees for 
harm done when a patient is being treated for ‘Covid-19’ or 
‘suspected Covid-19’. That is quite a thought when these are possible 
‘side-effects’ from the ‘vaccine’ (they are not ‘side’, they are effects) 
listed by the US Food and Drug Administration: 


Guillain-Barre syndrome; acute disseminated encephalomyelitis; 
transverse myelitis; encephalitis; myelitis; encephalomyelitis; 
meningoencephalitis; meningitis; encephalopathy; convulsions; 
seizures; stroke; narcolepsy; cataplexy; anaphylaxis; acute 
myocardial infarction (heart attack); myocarditis; pericarditis; 
autoimmune disease; death; implications for pregnancy, and birth 
outcomes; other acute demyelinating diseases; non anaphylactic 
allergy reactions; thrombocytopenia ; disseminated intravascular 
coagulation; venous thromboembolism; arthritis; arthralgia; joint 
pain; Kawasaki disease; multisystem inflammatory syndrome in 
children; vaccine enhanced disease. The latter is the way the 
‘vaccine’ has the potential to make diseases far worse than they 
would otherwise be. 


UK doctor and freedom campaigner Vernon Coleman described 
the conditions in this list as ‘all unpleasant, most of them very 
serious, and you can’t get more serious than death’. The thought that 
anyone at all has had the ‘vaccine’ in these circumstances is 
testament to the potential that humanity has for clueless, 
unquestioning, stupidity and for many that programmed stupidity 
has already been terminal. 


Dr Michael Yeadon is a former Vice President, head of research and 
Chief Scientific Adviser at vaccine giant Pfizer. Yeadon worked on 
the inside of Big Pharma, but that did not stop him becoming a vocal 
critic of “Covid vaccines’ and their potential for multiple harms, 
including infertility in women. By the spring of 2021 he went much 
further and even used the no, no, term ‘conspiracy’. When you begin 
to see what is going on it is impossible not to do so. Yeadon spoke 
out in an interview with freedom campaigner James Delingpole and 
I mentioned earlier how he said that no one had samples of ‘the 
virus’. He explained that the mRNA technique originated in the anti- 
cancer field and ways to turn on and off certain genes which could 
be advantageous if you wanted to stop cancer growing out of 
control. “That’s the origin of them. They are a very unusual 
application, really.’ Yeadon said that treating a cancer patient with 
an aggressive procedure might be understandable if the alternative 
was dying, but it was quite another thing to use the same technique 
as a public health measure. Most people involved wouldn’t catch the 
infectious agent you were vaccinating against and if they did they 
probably wouldn't die: 


If you are really using it as a public health measure you really want to as close as you can get 
to zero sides-effects ... | find it odd that they chose techniques that were really cutting their 
teeth in the field of oncology and I’m worried that in using gene-based vaccines that have to 
be injected in the body and spread around the body, get taken up into some cells, and the 
regulators haven’t quite told us which cells they get taken up into ... you are going to be 
generating a wide range of responses ... with multiple steps each of which could go well or 
badly. 


I doubt the Cult intends it to go well. Yeadon said that you can put 
any gene you like into the body through the ‘vaccine’. ‘You can 
certainly give them a gene that would do them some harm if you 
wanted.’ I was intrigued when he said that when used in the cancer 
field the technique could turn genes on and off. I explore this process 
in The Answer and with different genes having different functions 
you could create mayhem — physically and psychologically — if you 
turned the wrong ones on and the right ones off. I read reports of an 
experiment by researchers at the University of Washington’s school 
of computer science and engineering in which they encoded DNA to 
infect computers. The body is itself a biological computer and if 
human DNA can inflict damage on a computer why can’t the 
computer via synthetic material mess with the human body? It can. 
The Washington research team said it was possible to insert 
malicious malware into ‘physical DNA strands’ and corrupt the 
computer system of a gene sequencing machine as it ‘reads gene 
letters and stores them as binary digits 0 and 1’. They concluded that 
hackers could one day use blood or spit samples to access computer 
systems and obtain sensitive data from police forensics labs or infect 
genome files. It is at this level of digital interaction that synthetic 
‘vaccines’ need to be seen to get the full picture and that will become 
very clear later on. Michael Yeadon said it made no sense to give the 
‘vaccine’ to younger people who were in no danger from the ‘virus’. 
What was the benefit? It was all downside with potential effects: 


The fact that my government in what | thought was a civilised, rational country, is raining [the 
‘vaccine’] on people in their 30s and 40s, even my children in their 20s, they’re getting letters 
and phone calls, | know this is not right and any of you doctors who are vaccinating you 
know it’s not right, too. They are not at risk. They are not at risk from the disease, so you are 
now hoping that the side-effects are so rare that you get away with it. You don’t give new 
technology ... that you don’t understand to 100 percent of the population. 


Blood clot problems with the AstraZeneca ‘vaccine’ have been 
affecting younger people to emphasise the downside risks with no 
benefit. AstraZeneca’s version, produced with Oxford University, 
does not use mRNA, but still gets its toxic cocktail inside cells where 


it targets DNA. The Johnson & Johnson ‘vaccine’ which uses a 
similar technique has also produced blood clot effects to such an 
extent that the United States paused its use at one point. They are all 
‘gene therapy’ (cell modification) procedures and not ‘vaccines’. The 
truth is that once the content of these injections enter cells we have 
no idea what the effect will be. People can speculate and some can 
give very educated opinions and that’s good. In the end, though, 
only the makers know what their potions are designed to do and 
even they won't know every last consequence. Michael Yeadon was 
scathing about doctors doing what they knew to be wrong. 
‘Everyone’s mute’, he said. Doctors in the NHS must know this was 
not right, coming into work and injecting people. ‘I don’t know how 
they sleep at night. I know I couldn’t do it. I know that if I were in 
that position I’d have to quit.’ He said he knew enough about 
toxicology to know this was not a good risk-benefit. Yeadon had 
spoken to seven or eight university professors and all except two 
would not speak out publicly. Their universities had a policy that no 
one said anything that countered the government and its medical 
advisors. They were afraid of losing their government grants. This is 
how intimidation has been used to silence the truth at every level of 
the system. I say silence, but these people could still speak out if they 
made that choice. Yeadon called them ‘moral cowards’ — ‘This is 
about your children and grandchildren’s lives and you have just 
buggered off and left it.’ 


‘Variant nonsense 

Some of his most powerful comments related to the alleged 
‘variants’ being used to instil more fear, justify more lockdowns, and 
introduce more ‘vaccines’. He said government claims about 
‘variants’ were nonsense. He had checked the alleged variant ‘codes’ 
and they were 99.7 percent identical to the ‘original’. This was the 
human identity difference equivalent to putting a baseball cap on 
and off or wearing it the other way round. A 0.3 percent difference 
would make it impossible for that ‘variant’ to escape immunity from 
the ‘original’. This made no sense of having new ‘vaccines’ for 


‘variants’. He said there would have to be at least a 30 percent 
difference for that to be justified and even then he believed the 
immune system would still recognise what it was. Gates-funded 
‘variant modeller’ and ‘vaccine’-pusher John Edmunds might care to 
comment. Yeadon said drug companies were making new versions 
of the ‘vaccine’ as a ‘top up’ for ‘variants’. Worse than that, he said, 
the ‘regulators’ around the world like the MHRA in the UK had got 
together and agreed that because ‘vaccines’ for ‘variants’ were so 
similar to the first ‘vaccines’ they did not have to do safety studies. How 
transparently sinister that is. This is when Yeadon said: “There is a 
conspiracy here.’ There was no need for another vaccine for 
‘variants’ and yet we were told that there was and the country had 
shut its borders because of them. ‘They are going into hundreds of 
millions of arms without passing ‘go’ or any regulator. Why did they 
do that? Why did they pick this method of making the vaccine?’ 


The reason had to be something bigger than that it seemed and 
‘it’s not protection against the virus’. It’s was a far bigger project that 
meant politicians and advisers were willing to do things and not do 
things that knowingly resulted in avoidable deaths — ‘that’s already 
happened when you think about lockdown and deprivation of 
health care for a year.’ He spoke of people prepared to do something 
that results in the avoidable death of their fellow human beings and 
it not bother them. This is the penny-drop I have been working to 
get across for more than 30 years — the level of pure evil we are 
dealing with. Yeadon said his friends and associates could not 
believe there could be that much evil, but he reminded them of 
Stalin, Pol Pot and Hitler and of what Stalin had said: ‘One death is a 
tragedy. A million? A statistic.” He could not think of a benign 
explanation for why you need top-up vaccines ‘which I’m sure you 
don’t’ and for the regulators ‘to just get out of the way and wave 
them through’. Why would the regulators do that when they were 
still wrestling with the dangers of the ‘parent’ vaccine? He was 
clearly shocked by what he had seen since the ‘Covid’ hoax began 
and now he was thinking the previously unthinkable: 


If you wanted to depopulate a significant proportion of the world and to do it in a way that 
doesn’t involve destruction of the environment with nuclear weapons, poisoning everyone 
with anthrax or something like that, and you wanted plausible deniability while you had a 
multi-year infectious disease crisis, | actually don’t think you could come up with a better plan 
of work than seems to be in front of me. | can’t say that’s what they are going to do, but | can’t 
think of a benign explanation why they are doing it. 


He said he never thought that they would get rid of 99 percent of 
humans, but now he wondered. ‘If you wanted to that this would be 
a hell of a way to do it — it would be unstoppable folks.’ Yeadon had 
concluded that those who submitted to the ‘vaccine’ would be 
allowed to have some kind of normal life (but for how long?) while 
screws were tightened to coerce and mandate the last few percent. ‘I 
think they’Il put the rest of them in a prison camp. I wish I was 
wrong, but I don’t think I am.’ Other points he made included: There 
were no coronavirus vaccines then suddenly they all come along at 
the same time; we have no idea of the long term affect with trials so 
short; coercing or forcing people to have medical procedures is 
against the Nuremberg Code instigated when the Nazis did just that; 
people should at least delay having the ‘vaccine’; a quick Internet 
search confirms that masks don’t reduce respiratory viral 
transmission and ‘the government knows that’; they have smashed 
civil society and they know that, too; two dozen peer-reviewed 
studies show no connection between lockdown and reducing deaths; 
he knew from personal friends the elite were still flying around and 
going on holiday while the public were locked down; the elite were 
not having the ‘vaccines’. He was also asked if ‘vaccines’ could be 
made to target difference races. He said he didn’t know, but the 
document by the Project for the New American Century in 
September, 2000, said developing ‘advanced forms of biological 
warfare that can target specific genotypes may transform biological 
warfare from the realm of terror to a politically useful tool.’ Oh, 
they’re evil all right. Of that we can be absolutely sure. 


We have seen from the CDC definition that the mRNA ‘Covid 
vaccine’ is not a vaccine and nor are the others that claim to reduce 
‘severity of symptoms’ in some people, but not protect from infection 
or transmission. What about all the lies about returning to ‘normal’ if 
people were ‘vaccinated’? If they are not claimed to stop infection 
and transmission of the alleged ‘virus’, how does anything change? 
This was all lies to manipulate people to take the jabs and we are 
seeing that now with masks and distancing still required for the 
‘vaccinated’. How did they think that elderly people with fragile 
health and immune responses were going to be affected by infusing 
their cells with synthetic material and other toxic substances? They 
knew that in the short and long term it would be devastating and 
fatal as the culling of the old that began with the first lockdowns was 
continued with the ‘vaccine’. Death rates in care homes soared 
immediately residents began to be ‘vaccinated’ — infused with 
synthetic material. Brave and committed whistleblower nurses put 
their careers at risk by exposing this truth while the rest kept their 
heads down and their mouths shut to put their careers before those 
they are supposed to care for. A long-time American Certified 
Nursing Assistant who gave his name as James posted a video in 
which he described emotionally what happened in his care home 
when vaccination began. He said that during 2020 very few residents 
were sick with ‘Covid’ and no one died during the entire year; but 
shortly after the Pfizer mRNA injections 14 people died within two 
weeks and many others were near death. ‘They’re dropping like 
flies’, he said. Residents who walked on their own before the shot 
could no longer and they had lost their ability to conduct an 
intelligent conversation. The home’s management said the sudden 
deaths were caused by a ‘super-spreader’ of ‘Covid-19’. Then how 
come, James asked, that residents who refused to take the injections 
were not sick? It was a case of inject the elderly with mRNA 
synthetic potions and blame their illness and death that followed on 
the ‘virus’. James described what was happening in care homes as 
‘the greatest crime of genocide this country has ever seen’. 
Remember the NHS staff nurse from earlier who used the same 


word ‘genocide’ for what was happening with the ‘vaccines’ and 
that it was an ‘act of human annihilation’. A UK care home 
whistleblower told a similar story to James about the effect of the 
‘vaccine’ in deaths and ‘outbreaks’ of illness dubbed ‘Covid’ after 
getting the jab. She told how her care home management and staff 
had zealously imposed government regulations and no one was 
allowed to even question the official narrative let alone speak out 
against it. She said the NHS was even worse. Again we see the 
results of reframing. A worker at a local care home where I live said 
they had not had a single case of ‘Covid’ there for almost a year and 
when the residents were ‘vaccinated’ they had 19 positive cases in 
two weeks with eight dying. 


It's not the ‘vaccine’ — honest 

The obvious cause and effect was being ignored by the media and 
most of the public. Australia’s health minister Greg Hunt (a former 
head of strategy at the World Economic Forum) was admitted to 
hospital after he had the ‘vaccine’. He was suffering according to 
reports from the skin infection ‘cellulitis’ and it must have been a 
severe case to have warranted days in hospital. Immediately the 
authorities said this was nothing to do with the ‘vaccine’ when an 
effect of some vaccines is a ‘cellulitis-like reaction’. We had families 
of perfectly healthy old people who died after the ‘vaccine’ saying 
that if only they had been given the ‘vaccine’ earlier they would still 
be alive. As a numbskull rating that is off the chart. A father of four 
‘died of Covid’ at aged 48 when he was taken ill two days after 
having the ‘vaccine’. The man, a health administrator, had been 
‘shielding during the pandemic’ and had ‘not really left the house’ 
until he went for the ‘vaccine’. Having the ‘vaccine’ and then falling 
ill and dying does not seem to have qualified as a possible cause and 
effect and ‘Covid-19’ went on his death certificate. His family said 
they had no idea how he ‘caught the virus’. A family member said: 
‘Tragically, it could be that going for a vaccination ultimately led to 
him catching Covid ...The sad truth is that they are never going to 
know where it came from.’ The family warned people to remember 


that the virus still existed and was ‘very real’. So was their stupidity. 
Nurses and doctors who had the first round of the ‘vaccine’ were 
collapsing, dying and ending up in a hospital bed while they or their 
grieving relatives were saying they'd still have the ‘vaccine’ again 
despite what happened. I kid you not. You mean if your husband 
returned from the dead he’d have the same ‘vaccine’ again that killed 
him?? 

Doctors at the VCU Medical Center in Richmond, Virginia, said 
the Johnson & Johnson ‘vaccine’ was to blame for a man’s skin 
peeling off. Patient Richard Terrell said: ‘It all just happened so fast. 
My skin peeled off. It’s still coming off on my hands now.’ He said it 
was stinging, burning and itching and when he bent his arms and 
legs it was very painful with ‘the skin swollen and rubbing against 
itself’. Pfizer/BioNTech and Moderna vaccines use mRNA to change 
the cell while the Johnson & Johnson version uses DNA in a process 
similar to AstraZeneca’s technique. Johnson & Johnson and 
AstraZeneca have both had their ‘vaccines’ paused by many 
countries after causing serious blood problems. Terrell’s doctor Fnu 
Nutan said he could have died if he hadn’t got medical attention. It 
sounds terrible so what did Nutan and Terrell say about the ‘vaccine’ 
now? Oh, they still recommend that people have it. A nurse in a 
hospital bed 40 minutes after the vaccination and unable to swallow 
due to throat swelling was told by a doctor that he lost mobility in 
his arm for 36 hours following the vaccination. What did he say to 
the ailing nurse? ‘Good for you for getting the vaccination.’ We are 
dealing with a serious form of cognitive dissonance madness in both 
public and medical staff. There is a remarkable correlation between 
those having the ‘vaccine’ and trumpeting the fact and suffering bad 
happenings shortly afterwards. Witold Rogiewicz, a Polish doctor, 
made a video of his ‘vaccination’ and ridiculed those who were 
questioning its safety and the intentions of Bill Gates: “Vaccinate 
yourself to protect yourself, your loved ones, friends and also 
patients. And to mention quickly I have info for anti-vaxxers and 
anti-Coviders if you want to contact Bill Gates you can do this 
through me.’ He further ridiculed the dangers of 5G. Days later he 


was dead, but naturally the vaccination wasn’t mentioned in the 
verdict of ‘heart attack’. 


Lies, lies and more lies 

So many members of the human race have slipped into extreme 
states of insanity and unfortunately they include reframed doctors 
and nursing staff. Having a ‘vaccine’ and dying within minutes or 
hours is not considered a valid connection while death from any 
cause within 28 days or longer of a positive test with a test not 
testing for the ‘virus’ means “Covid-19’ goes on the death certificate. 
How could that ‘vaccine’-death connection not have been made 
except by calculated deceit? US figures in the initial rollout period to 
February 12th, 2020, revealed that a third of the deaths reported to 
the CDC after ‘Covid vaccines’ happened within 48 hours. Five men 
in the UK suffered an ‘extremely rare’ blood clot problem after 
having the AstraZeneca ‘vaccine’, but no causal link was established 
said the Gates-funded Medicines and Healthcare products 
Regulatory Agency (MHRA) which had given the ‘vaccine’ 
emergency approval to be used. Former Pfizer executive Dr Michael 
Yeadon explained in his interview how the procedures could cause 
blood coagulation and clots. People who should have been at no risk 
were dying from blood clots in the brain and he said he had heard 
from medical doctor friends that people were suffering from skin 
bleeding and massive headaches. The AstraZeneca ‘shot’ was 
stopped by some 20 countries over the blood clotting issue and still 
the corrupt MHRA, the European Medicines Agency (EMA) and the 
World Health Organization said that it should continue to be given 
even though the EMA admitted that it ‘still cannot rule out 
definitively’ a link between blood clotting and the ‘vaccine’. Later 
Marco Cavaleri, head of EMA vaccine strategy, said there was indeed 
a clear link between the ‘vaccine’ and thrombosis, but they didn’t 
know why. So much for the trials showing the ‘vaccine’ is safe. Blood 
clots were affecting younger people who would be under virtually 
no danger from ‘Covid’ even if it existed which makes it all the more 
stupid and sinister. 


The British government responded to public alarm by wheeling 
out June Raine, the terrifyingly weak infant school headmistress 
sound-alike who heads the UK MHRA drug ‘regulator’. The idea 
that she would stand up to Big Pharma and government pressure is 
laughable and she told us that all was well in the same way that she 
did when allowing untested, never-used-on-humans-before, 
genetically-manipulating ‘vaccines’ to be exposed to the public in the 
first place. Mass lying is the new normal of the ‘Covid’ era. The 
MHRA later said 30 cases of rare blood clots had by then been 
connected with the AstraZeneca ‘vaccine’ (that means a lot more in 
reality) while stressing that the benefits of the jab in preventing 
‘Covid-19 outweighed any risks. A more ridiculous and 
disingenuous statement with callous disregard for human health it is 
hard to contemplate. Immediately after the mendacious ‘all-clears’ 
two hospital workers in Denmark experienced blood clots and 
cerebral haemorrhaging following the AstraZeneca jab and one died. 
Top Norwegian health official Pal Andre Holme said the ‘vaccine’ 
was the only common factor: ‘There is nothing in the patient history 
of these individuals that can give such a powerful immune response 
... lam confident that the antibodies that we have found are the 
cause, and I see no other explanation than it being the vaccine which 
triggers it.’ Strokes, a clot or bleed in the brain, were clearly 
associated with the ‘vaccine’ from word of mouth and whistleblower 
reports. Similar consequences followed with all these ‘vaccines’ that 
we were told were so safe and as the numbers grew by the day it 
was clear we were witnessing human carnage. 


Learning the hard way 

A woman interviewed by UKColumn told how her husband 
suffered dramatic health effects after the vaccine when he’d been in 
good health all his life. He went from being a little unwell to losing 
all feeling in his legs and experiencing ‘excruciating pain’. 
Misdiagnosis followed twice at Accident and Emergency (an 
‘allergy’ and ‘sciatica’) before he was admitted to a neurology ward 
where doctors said his serious condition had been caused by the 


‘vaccine’. Another seven ‘vaccinated’ people were apparently being 
treated on the same ward for similar symptoms. The woman said he 
had the ‘vaccine’ because they believed media claims that it was safe. 
‘I didn’t think the government would give out a vaccine that does 
this to somebody; I believed they would be bringing out a 
vaccination that would be safe.’ What a tragic way to learn that 
lesson. Another woman posted that her husband was transporting 
stroke patients to hospital on almost every shift and when he asked 
them if they had been ‘vaccinated’ for ‘Covid’ they all replied ‘yes’. 
One had a ‘massive brain bleed’ the day after his second dose. She 
said her husband reported the ‘just been vaccinated’ information 
every time to doctors in A and E only for them to ignore it, make no 
notes and appear annoyed that it was even mentioned. This 
particular report cannot be verified, but it expresses a common 
theme that confirms the monumental underreporting of ‘vaccine’ 
consequences. Interestingly as the ‘vaccines’ and their brain blood 
clot/stroke consequences began to emerge the UK National Health 
Service began a publicity campaign telling the public what to do in 
the event of a stroke. A Scottish NHS staff nurse who quit in disgust 
in March, 2021, said: 


| have seen traumatic injuries from the vaccine, they’re not getting reported to the yellow card 
[adverse reaction] scheme, they’re treating the symptoms, not asking why, why it’s happening. 
It’s just treating the symptoms and when you speak about it you’re dismissed like you’re crazy, 
I’m not crazy, I’m not crazy because every other colleague I’ve spoken to is terrified to speak 
out, they’ve had enough. 


Videos appeared on the Internet of people uncontrollably shaking 
after the ‘vaccine’ with no control over muscles, limbs and even their 
face. A Scottish mother broke out in a severe rash all over her body 
almost immediately after she was given the AstraZeneca ‘vaccine’. 
The pictures were horrific. Leigh King, a 41-year-old hairdresser 
from Lanarkshire said: ‘Never in my life was I prepared for what I 
was about to experience ... My skin was so sore and constantly hot 
... [have never felt pain like this ...’ But don’t you worry, the 
‘vaccine’ is perfectly safe. Then there has been the effect on medical 


staff who have been pressured to have the ‘vaccine’ by psychopathic 
‘health’ authorities and government. A London hospital consultant 
who gave the name K. Polyakova wrote this to the British Medical 
Journal or BMJ: 


| am currently struggling with ... the failure to report the reality of the morbidity caused by our 
current vaccination program within the health service and staff population. The levels of 
sickness after vaccination is unprecedented and staff are getting very sick and some with 
neurological symptoms which is having a huge impact on the health service function. Even 
the young and healthy are off for days, some for weeks, and some requiring medical 
treatment. Whole teams are being taken out as they went to get vaccinated together. 


Mandatory vaccination in this instance is stupid, unethical and irresponsible when it comes to 
protecting our staff and public health. We are in the voluntary phase of vaccination, and 
encouraging staff to take an unlicensed product that is impacting on their immediate health ... 
it is clearly stated that these vaccine products do not offer immunity or stop transmission. In 
which case why are we doing it? 


Not to protect health that’s for sure. Medical workers are lauded by 
governments for agenda reasons when they couldn’t give a toss 
about them any more than they can for the population in general. 
Schools across America faced the same situation as they closed due 
to the high number of teachers and other staff with bad reactions to 
the Pfizer/BioNTech, Moderna, and Johnson & Johnson ‘Covid 
vaccines’ all of which were linked to death and serious adverse 
effects. The BMJ took down the consultant’s comments pretty 
quickly on the grounds that they were being used to spread 
‘disinformation’. They were exposing the truth about the ‘vaccine’ 
was the real reason. The cover-up is breathtaking. 


The scale of the ‘vaccine’ death cover-up worldwide can be 
confirmed by comparing official figures with the personal experience 
of the public. I heard of many people in my community who died 
immediately or soon after the vaccine that would never appear in the 
media or even likely on the official totals of ‘vaccine’ fatalities and 
adverse reactions when only about ten percent are estimated to be 


reported and I have seen some estimates as low as one percent in a 
Harvard study. In the UK alone by April 29th, 2021, some 757,654 
adverse reactions had been officially reported from the 

Pfizer/BioN Tech, Oxford/AstraZeneca and Moderna ‘vaccines’ with 
more than a thousand deaths linked to jabs and that means an 
estimated ten times this number in reality from a ten percent 
reporting rate percentage. That’s seven million adverse reactions and 
10,000 potential deaths and a one percent reporting rate would be 
ten times those figures. In 1976 the US government pulled the swine 
flu vaccine after 53 deaths. The UK data included a combined 10,000 
eye disorders from the ‘Covid vaccines’ with more than 750 suffering 
visual impairment or blindness and again multiply by the estimated 
reporting percentages. As ‘Covid cases’ officially fell hospitals 
virtually empty during the ‘Covid crisis’ began to fill up with a 
range of other problems in the wake of the ‘vaccine’ rollout. The 
numbers across America have also been catastrophic. Deaths linked 
to all types of vaccine increased by 6,000 percent in the first quarter of 
2021 compared with 2020. A 39-year-old woman from Ogden, Utah, 
died four days after receiving a second dose of Moderna’s ‘Covid 
vaccine’ when her liver, heart and kidneys all failed despite the fact 
that she had no known medical issues or conditions. Her family 
sought an autopsy, but Dr Erik Christensen, Utah’s chief medical 
examiner, said proving vaccine injury as a cause of death almost 
never happened. He could think of only one instance where an 
autopsy would name a vaccine as the official cause of death and that 
would be anaphylaxis where someone received a vaccine and died 
almost instantaneously. ‘Short of that, it would be difficult for us to 
definitively say this is the vaccine,’ Christensen said. If that is true 
this must be added to the estimated ten percent (or far less) 
reporting rate of vaccine deaths and serious reactions and the 
conclusion can only be that vaccine deaths and serious reactions — 
including these ‘Covid’ potions’ — are phenomenally understated in 
official figures. The same story can be found everywhere. Endless 
accounts of deaths and serious reactions among the public, medical 


and care home staff while official figures did not even begin to 
reflect this. 


Professional script-reader Dr David Williams, a ‘top public-health 
official’ in Ontario, Canada, insulted our intelligence by claiming 
only four serious adverse reactions and no deaths from the more 
than 380,000 vaccine doses then given. This bore no resemblance to 
what people knew had happened in their owns circles and we had 
Dirk Huyer in charge of getting millions vaccinated in Ontario while 
at the same time he was Chief Coroner for the province investigating 
causes of death including possible death from the vaccine. An aide 
said he had stepped back from investigating deaths, but evidence 
indicated otherwise. Rosemary Frei, who secured a Master of Science 
degree in molecular biology at the Faculty of Medicine at Canada’s 
University of Calgary before turning to investigative journalism, was 
one who could see that official figures for ‘vaccine’ deaths and 
reactions made no sense. She said that doctors seldom reported 
adverse events and when people got really sick or died after getting 
a vaccination they would attribute that to anything except the 
vaccines. It had been that way for years and anyone who wondered 
aloud whether the ‘Covid vaccines’ or other shots cause harm is 
immediately branded as ‘anti-vax’ and ‘anti-science’. This was 
‘career-threatening’ for health professionals. Then there was the 
huge pressure to support the push to ‘vaccinate’ billions in the 
quickest time possible. Frei said: 


So that’s where we’re at today. More than half a million vaccine doses have been given to 
people in Ontario alone. The rush is on to vaccinate all 15 million of us in the province by 
September. And the mainstream media are screaming for this to be sped up even more. That 
all adds up to only a very slim likelihood that we’re going to be told the truth by officials 
about how many people are getting sick or dying from the vaccines. 


What is true of Ontario is true of everywhere. 


They KNEW — and still did it 


The authorities knew what was going to happen with multiple 
deaths and adverse reactions. The UK government’s Gates-funded 


and Big Pharma-dominated Medicines and Healthcare products 
Regulatory Agency (MHRA) hired a company to employ AI in 
compiling the projected reactions to the ‘vaccine’ that would 
otherwise be uncountable. The request for applications said: “The 
MHRA urgently seeks an Artificial Intelligence (AI) software tool to 
process the expected high volume of Covid-19 vaccine Adverse Drug 
Reaction ...’ This was from the agency, headed by the disingenuous 
June Raine, that gave the ‘vaccines’ emergency approval and the 
company was hired before the first shot was given. ‘We are going to 
kill and maim you — is that okay?’ ‘Oh, yes, perfectly fine — I’m very 
grateful, thank you, doctor.’ The range of “Covid vaccine’ adverse 
reactions goes on for page after page in the MHRA criminally 
underreported ‘Yellow Card’ system and includes affects to eyes, 
ears, skin, digestion, blood and so on. Raine’s MHRA amazingly 
claimed that the ‘overall safety experience ... is so far as expected 
from the clinical trials’. The death, serious adverse effects, deafness 
and blindness were expected? When did they ever mention that? If 
these human tragedies were expected then those that gave approval 
for the use of these ‘vaccines’ must be guilty of crimes against 
humanity including murder — a definition of which is ‘killing a 
person with malice aforethought or with recklessness manifesting 
extreme indifference to the value of human life.” People involved at 
the MHRA, the CDC in America and their equivalent around the 
world must go before Nuremberg trials to answer for their callous 
inhumanity. We are only talking here about the immediate effects of 
the ‘vaccine’. The longer-term impact of the DNA synthetic 
manipulation is the main reason they are so hysterically desperate to 
inoculate the entire global population in the shortest possible time. 
Africa and the developing world are a major focus for the ‘vaccine’ 
depopulation agenda and a mass vaccination sales-pitch is 
underway thanks to caring people like the Rockefellers and other 
Cult assets. The Rockefeller Foundation, which pre-empted the 
‘Covid pandemic’ in a document published in 2010 that ‘predicted’ 
what happened a decade later, announced an initial $34.95 million 
grant in February, 2021, ‘to ensure more equitable access to Covid-19 


testing and vaccines’ among other things in Africa in collaboration 
with ‘24 organizations, businesses, and government agencies’. The 
pan-Africa initiative would focus on 10 countries: Burkina Faso, 
Ethiopia, Ghana, Kenya, Nigeria, Rwanda, South Africa, Tanzania, 
Uganda, and Zambia’. Rajiv Shah, President of the Rockefeller 
Foundation and former administrator of ClA-controlled USAID, said 
that if Africa was not mass-vaccinated (to change the DNA of its 
people) it was a ‘threat to all of humanity’ and not fair on Africans. 
When someone from the Rockefeller Foundation says they want to 
do something to help poor and deprived people and countries it is 
time for a belly-laugh. They are doing this out of the goodness of 
their ‘heart’ because ‘vaccinating’ the entire global population is 
what the ‘Covid’ hoax set out to achieve. Official ‘decolonisation’ of 
Africa by the Cult was merely a prelude to financial colonisation on 
the road to a return to physical colonisation. The ‘vaccine’ is vital to 
that and the sudden and convenient death of the ‘Covid’ sceptic 
president of Tanzania can be seen in its true light. A lot of people in 
Africa are aware that this is another form of colonisation and 
exploitation and they need to stand their ground. 


The ‘vaccine is working scam 

A potential problem for the Cult was that the ‘vaccine’ is meant to 
change human DNA and body messaging and not to protect anyone 
from a ‘virus’ never shown to exist. The vaccine couldn’t work 
because it was not designed to work and how could they make it 
appear to be working so that more people would have it? This was 
overcome by lowering the amplification rate of the PCR test to 
produce fewer ‘cases’ and therefore fewer ‘deaths’. Some of us had 
been pointing out since March, 2020, that the amplification rate of 
the test not testing for the ‘virus’ had been made artificially high to 
generate positive tests which they could call ‘cases’ to justify 
lockdowns. The World Health Organization recommended an 
absurdly high 45 amplification cycles to ensure the high positives 
required by the Cult and then remained silent on the issue until 
January 20th, 2021 — Biden’s Inauguration Day. This was when the 


‘vaccinations’ were seriously underway and on that day the WHO 
recommended after discussions with America’s CDC that 
laboratories lowered their testing amplification. Dr David Samadi, a 
certified urologist and health writer, said the WHO was encouraging 
all labs to reduce their cycle count for PCR tests. He said the current 
cycle was much too high and was ‘resulting in any particle being 
declared a positive case’. Even one mainstream news report I saw 
said this meant the number of “Covid’ infections may have been 
‘dramatically inflated’. Oh, just a little bit. The CDC in America 
issued new guidance to laboratories in April, 2021, to use 28 cycles 
but only for ‘vaccinated’ people. The timing of the CDC/WHO 
interventions were cynically designed to make it appear the 
‘vaccines’ were responsible for falling cases and deaths when the real 
reason can be seen in the following examples. New York’s state lab, 
the Wadsworth Center, identified 872 positive tests in July, 2020, 
based on a threshold of 40 cycles. When the figure was lowered to 35 
cycles 43 percent of the 872 were no longer ‘positives’. At 30 cycles 
the figure was 63 percent. A Massachusetts lab found that between 
85 to 90 percent of people who tested positive in July with a cycle 
threshold of 40 would be negative at 30 cycles, Ashish Jha, MD, 
director of the Harvard Global Health Institute, said: ‘I’m really 
shocked that it could be that high ... Boy, does it really change the 
way we need to be thinking about testing.’ I’m shocked that I could 
see the obvious in the spring of 2020, with no medical background, 
and most medical professionals still haven’t worked it out. No, that’s 
not shocking — it’s terrifying. 

Three weeks after the WHO directive to lower PCR cycles the 
London Daily Mail ran this headline: ‘Why ARE Covid cases 
plummeting? New infections have fallen 45% in the US and 30% 
globally in the past 3 weeks but experts say vaccine is NOT the main 
driver because only 8% of Americans and 13% of people worldwide 
have received their first dose.’ They acknowledged that the drop 
could not be attributed to the ‘vaccine’, but soon this morphed 
throughout the media into the ‘vaccine’ has caused cases and deaths 
to fall when it was the PCR threshold. In December, 2020, there was 


chaos at English Channel ports with truck drivers needing negative 
‘Covid’ tests before they could board a ferry home for Christmas. 
The government wanted to remove the backlog as fast as possible 
and they brought in troops to do the ‘testing’. Out of 1,600 drivers 
just 36 tested positive and the rest were given the all clear to cross 
the Channel. I guess the authorities thought that 36 was the least 
they could get away with without the unquestioning catching on. 
The amplification trick which most people believed in the absence of 
information in the mainstream applied more pressure on those 
refusing the ‘vaccine’ to succumb when it ‘obviously worked’. The 
truth was the exact opposite with deaths in care homes soaring with 
the ‘vaccine’ and in Israel the term used was ‘skyrocket’. A re- 
analysis of published data from the Israeli Health Ministry led by Dr 
Hervé Seligmann at the Medicine Emerging Infectious and Tropical 
Diseases at Aix-Marseille University found that Pfizer’s ‘Covid 
vaccine’ killed ‘about 40 times more [elderly] people than the disease 
itself would have killed’ during a five-week vaccination period and 
260 times more younger people than would have died from the 
‘virus’ even according to the manipulated ‘virus’ figures. Dr 
Seligmann and his co-study author, Haim Yativ, declared after 
reviewing the Israeli ‘vaccine’ death data: ‘This is a new Holocaust.’ 


Then, in mid-April, 2021, after vast numbers of people worldwide 
had been ‘vaccinated’, the story changed with clear coordination. 
The UK government began to prepare the ground for more future 
lockdowns when Nuremberg-destined Boris Johnson told yet 
another whopper. He said that cases had fallen because of lockdowns 
not ‘vaccines’. Lockdowns are irrelevant when there is no ‘virus’ and 
the test and fraudulent death certificates are deciding the number of 
‘cases’ and ‘deaths’. Study after study has shown that lockdowns 
don’t work and instead kill and psychologically destroy people. 
Meanwhile in the United States Anthony Fauci and Rochelle 
Walensky, the ultra-Zionist head of the CDC, peddled the same line. 
More lockdown was the answer and not the ‘vaccine’, a line repeated 
on cue by the moron that is Canadian Prime Minister Justin Trudeau. 
Why all the hysteria to get everyone ‘vaccinated’ if lockdowns and 


not ‘vaccines’ made the difference? None of it makes sense on the 
face of it. Oh, but it does. The Cult wants lockdowns and the 
‘vaccine’ and if the ‘vaccine’ is allowed to be seen as the total answer 
lockdowns would no longer be justified when there are still 
livelihoods to destroy. ‘Variants’ and renewed upward manipulation 
of PCR amplification are planned to instigate never-ending 
lockdown and more ‘vaccines’. 


You must have it— we're desperate 

Israel, where the Jewish and Arab population are ruled by the 
Sabbatian Cult, was the front-runner in imposing the DNA- 
manipulating ‘vaccine’ on its people to such an extent that Jewish 
refusers began to liken what was happening to the early years of 
Nazi Germany. This would seem to be a fantastic claim. Why would 
a government of Jewish people be acting like the Nazis did? If you 
realise that the Sabbatian Cult was behind the Nazis and that 
Sabbatians hate Jews the pieces start to fit and the question of why a 
‘Jewish’ government would treat Jews with such callous disregard 
for their lives and freedom finds an answer. Those controlling the 
government of Israel aren't Jewish — they're Sabbatian. Israeli lawyer 
Tamir Turgal was one who made the Nazi comparison in comments 
to German lawyer Reiner Fuellmich who is leading a class action 
lawsuit against the psychopaths for crimes against humanity. Turgal 
described how the Israeli government was vaccinating children and 
pregnant women on the basis that there was no evidence that this 
was dangerous when they had no evidence that it wasn’t dangerous 
either. They just had no evidence. This was medical experimentation 
and Turgal said this breached the Nuremberg Code about medical 
experimentation and procedures requiring informed consent and 
choice. Think about that. A Nuremberg Code developed because of 
Nazi experimentation on Jews and others in concentration camps by 
people like the evil-beyond-belief Josef Mengele is being breached by 
the Israeli government; but when you know that it’s a Sabbatian 
government along with its intelligence and military agencies like 
Mossad, Shin Bet and the Israeli Defense Forces, and that Sabbatians 


were the force behind the Nazis, the kaleidoscope comes into focus. 
What have we come to when Israeli Jews are suing their government 
for violating the Nuremberg Code by essentially making Israelis 
subject to a medical experiment using the controversial ‘vaccines’? 
It’s a shocker that this has to be done in the light of what happened 
in Nazi Germany. The Anshe Ha-Emet, or ‘People of the Truth’, 
made up of Israeli doctors, lawyers, campaigners and public, have 
launched a lawsuit with the International Criminal Court. It says: 


When the heads of the Ministry of Health as well as the prime minister presented the vaccine 
in Israel and began the vaccination of Israeli residents, the vaccinated were not advised, that, 
in practice, they are taking part in a medical experiment and that their consent is required for 
this under the Nuremberg Code. 


The irony is unbelievable, but easily explained in one word: 
Sabbatians. The foundation of Israeli ‘Covid’ apartheid is the ‘green 
pass’ or ‘green passport’ which allows Jews and Arabs who have 
had the DNA-manipulating ‘vaccine’ to go about their lives — to 
work, fly, travel in general, go to shopping malls, bars, restaurants, 
hotels, concerts, gyms, swimming pools, theatres and sports venues, 
while non-’ vaccinated’ are banned from all those places and 
activities. Israelis have likened the ‘green pass’ to the yellow stars 
that Jews in Nazi Germany were forced to wear — the same as the 
yellow stickers that a branch of UK supermarket chain Morrisons 
told exempt mask-wears they had to display when shopping. How 
very sensitive. The Israeli system is blatant South African-style 
apartheid on the basis of compliance or non-compliance to fascism 
rather than colour of the skin. How appropriate that the Sabbatian 
Israeli government was so close to the pre-Mandela apartheid 
regime in Pretoria. The Sabbatian-instigated ‘vaccine passport’ in 
Israel is planned for everywhere. Sabbatians struck a deal with 
Pfizer that allowed them to lead the way in the percentage of a 
national population infused with synthetic material and the result 
was catastrophic. Israeli freedom activist Shai Dannon told me how 
chairs were appearing on beaches that said ‘vaccinated only’. Health 
Minister Yuli Edelstein said that anyone unwilling or unable to get 


the jabs that ‘confer immunity’ will be ‘left behind’. The man’s a liar. 
Not even the makers claim the ‘vaccines’ confer immunity. When 
you see those figures of ‘vaccine’ deaths these psychopaths were 
saying that you must take the chance the ‘vaccine’ will kill you or 
maim you while knowing it will change your DNA or lockdown for 
you will be permanent. That's fascism. The Israeli parliament passed 
a law to allow personal information of the non-vaccinated to be 
shared with local and national authorities for three months. This was 
claimed by its supporters to be a way to ‘encourage’ people to be 
vaccinated. Hadas Ziv from Physicians for Human Rights described 
this as a ‘draconian law which crushed medical ethics and the 
patient rights’. But that’s the idea, the Sabbatians would reply. 


Your papers, please 

Sabbatian Israel was leading what has been planned all along to be a 
global ‘vaccine pass’ called a ‘green passport’ without which you 
would remain in permanent lockdown restriction and unable to do 
anything. This is how badly — desperately — the Cult is to get everyone 
‘vaccinated’. The term and colour ‘green’ was not by chance and 
related to the psychology of fusing the perception of the green 
climate hoax with the ‘Covid’ hoax and how the ‘solution’ to both is 
the same Great Reset. Lying politicians, health officials and 
psychologists denied there were any plans for mandatory 
vaccinations or restrictions based on vaccinations, but they knew 
that was exactly what was meant to happen with governments of all 
countries reaching agreements to enforce a global system. ‘Free’ 
Denmark and ‘free’ Sweden unveiled digital vaccine certification. 
Cyprus, Czech Republic, Estonia, Greece, Hungary, Iceland, Italy, 
Poland, Portugal, Slovakia, and Spain have all committed to a 
vaccine passport system and the rest including the whole of the EU 
would follow. The satanic UK government will certainly go this way 
despite mendacious denials and at the time of writing it is trying to 
manipulate the public into having the ‘vaccine’ so they could go 
abroad on a summer holiday. How would that work without 
something to prove you had the synthetic toxicity injected into you? 


Documents show that the EU’s European Commission was moving 
towards ‘vaccine certificates’ in 2018 and 2019 before the ‘Covid’ 
hoax began. They knew what was coming. Abracadabra — Ursula 
von der Leyen, the German President of the Commission, 
announced in March, 2021, an EU ‘Digital Green Certificate’ — green 
again — to track the public’s ‘Covid status’. The passport sting is 
worldwide and the Far East followed the same pattern with South 
Korea ruling that only those with ‘vaccination’ passports — again the 
green pass — would be able to ‘return to their daily lives’. 


Bill Gates has been preparing for this ‘passport’ with other Cult 
operatives for years and beyond the paper version is a Gates-funded 
‘digital tattoo’ to identify who has been vaccinated and who hasn't. 
The ‘tattoo’ is reported to include a substance which is externally 
readable to confirm who has been vaccinated. This is a bio-luminous 
light-generating enzyme (think fireflies) called ... Luciferase. Yes, 
named after the Cult ‘god’ Lucifer the ‘light bringer’ of whom more 
to come. Gates said he funded the readable tattoo to ensure children 
in the developing world were vaccinated and no one was missed out. 
He cares so much about poor kids as we know. This was just the 
cover story to develop a vaccine tagging system for everyone on the 
planet. Gates has been funding the ID2020 ‘alliance’ to do just that in 
league with other lovely people at Microsoft, GAVI, the Rockefeller 
Foundation, Accenture and IDEO.org. He said in interviews in 
March, 2020, before any ‘vaccine’ publicly existed, that the world 
must have a globalised digital certificate to track the ‘virus’ and who 
had been vaccinated. Gates knew from the start that the mRNA 
vaccines were coming and when they would come and that the plan 
was to tag the ‘vaccinated’ to marginalise the intelligent and stop 
them doing anything including travel. Evil just doesn’t suffice. Gates 
was exposed for offering a $10 million bribe to the Nigerian House 
of Representatives to invoke compulsory ‘Covid’ vaccination of all 
Nigerians. Sara Cunial, a member of the Italian Parliament, called 
Gates a ‘vaccine criminal’. She urged the Italian President to hand 
him over to the International Criminal Court for crimes against 


humanity and condemned his plans to ‘chip the human race’ 
through ID2020. 

You know it’s a long-planned agenda when war criminal and Cult 
gofer Tony Blair is on the case. With the scale of arrogance only 
someone as dark as Blair can muster he said: ‘Vaccination in the end 
is going to be your route to liberty.’ Blair is a disgusting piece of 
work and he confirms that again. The media has given a lot of 
coverage to a bloke called Charlie Mullins, founder of London’s 
biggest independent plumbing company, Pimlico Plumbers, who has 
said he won’t employ anyone who has not been vaccinated or have 
them go to any home where people are not vaccinated. He said that 
if he had his way no one would be allowed to walk the streets if they 
have not been vaccinated. Gates was cheering at the time while I was 
alerting the white coats. The plan is that people will qualify for 
‘passports’ for having the first two doses and then to keep it they 
will have to have all the follow ups and new ones for invented 
‘variants’ until human genetics is transformed and many are dead 
who can’t adjust to the changes. Hollywood celebrities — the usual 
propaganda stunt — are promoting something called the WELL 
Health-Safety Rating to verify that a building or space has ‘taken the 
necessary steps to prioritize the health and safety of their staff, 
visitors and other stakeholders’. They included Lady Gaga, Jennifer 
Lopez, Michael B. Jordan, Robert DeNiro, Venus Williams, Wolfgang 
Puck, Deepak Chopra and 17th Surgeon General Richard Carmona. 
Yawn. WELL Health-Safety has big connections with China. Parent 
company Delos is headed by former Goldman Sachs partner Paul 
Scialla. This is another example — and we will see so many others — 
of using the excuse of ‘health’ to dictate the lives and activities of the 
population. I guess one confirmation of the ‘safety’ of buildings is 
that only ‘vaccinated’ people can go in, right? 


Electronic concentration camps 

I wrote decades ago about the plans to restrict travel and here we are 
for those who refuse to bow to tyranny. This can be achieved in one 
go with air travel if the aviation industry makes a blanket decree. 


The ‘vaccine’ and guaranteed income are designed to be part of a 
global version of China’s social credit system which tracks behaviour 
24/7 and awards or deletes ‘credits’ based on whether your 
behaviour is supported by the state or not. I mean your entire 
lifestyle — what you do, eat, say, everything. Once your credit score 
falls below a certain level consequences kick in. In China tens of 
millions have been denied travel by air and train because of this. All 
the locations and activities denied to refusers by the ‘vaccine’ 
passports will be included in one big mass ban on doing almost 
anything for those that don’t bow their head to government. It’s 
beyond fascist and a new term is required to describe its extremes — I 
guess fascist technocracy will have to do. The way the Chinese 
system of technological — technocratic — control is sweeping the West 
can be seen in the Los Angeles school system and is planned to be 
expanded worldwide. Every child is required to have a “Covid’- 
tracking app scanned daily before they can enter the classroom. The 
so-called Daily Pass tracking system is produced by Gates’ Microsoft 
which I’m sure will shock you rigid. The pass will be scanned using 
a barcode (one step from an inside-the-body barcode) and the 
information will include health checks, ‘Covid’ tests and 
vaccinations. Entry codes are for one specific building only and 
access will only be allowed if a student or teacher has a negative test 
with a test not testing for the ‘virus’, has no symptoms of anything 
alleged to be related to ‘Covid’ (symptoms from a range of other 
illness), and has a temperature under 100 degrees. No barcode, no 
entry, is planned to be the case for everywhere and not only schools. 
Kids are being psychologically prepared to accept this as ‘normal’ 
their whole life which is why what they can impose in schools is so 
important to the Cult and its gofers. Long-time American freedom 
campaigner John Whitehead of the Rutherford Institute was not 
exaggerating when he said: ‘Databit by databit, we are building our 
own electronic concentration camps.’ Canada under its Cult gofer 
prime minister Justin Trudeau has taken a major step towards the 
real thing with people interned against their will if they test positive 
with a test not testing for the ‘virus’ when they arrive at a Canadian 


airport. They are jailed in internment hotels often without food or 
water for long periods and with many doors failing to lock there 
have been sexual assaults. The interned are being charged 
sometimes $2,000 for the privilege of being abused in this way. 
Trudeau is fully on board with the Cult and says the ‘Covid 
pandemic’ has provided an opportunity for a global ‘reset’ to 
permanently change Western civilisation. His number two, Deputy 
Prime Minister Chrystia Freeland, is a trustee of the World Economic 
Forum and a Rhodes Scholar. The Trudeau family have long been 
servants of the Cult. See The Biggest Secret and Cathy O’Brien’s book 
Trance-Formation of America for the horrific background to Trudeau's 
father Pierre Trudeau another Canadian prime minister. Hide your 
fascism behind the fagade of a heart-on-the-sleeve liberal. It’s a well- 
honed Cult technique. 


What can the ‘vaccine’ really do? 


We have a ‘virus’ never shown to exist and ‘variants’ of the ‘virus’ 
that have also never been shown to exist except, like the ‘original’, as 
computer-generated fictions. Even if you believe there’s a ‘virus’ the 
‘case’ to ‘death’ rate is in the region of 0.23 to 0.15 percent and those 
‘deaths’ are concentrated among the very old around the same 
average age that people die anyway. In response to this lack of threat 
(in truth none) psychopaths and idiots, knowingly and unknowingly 
answering to Gates and the Cult, are seeking to ‘vaccinate’ every 
man, woman and child on Planet Earth. Clearly the ‘vaccine’ is not 
about “Covid’ — none of this ever has been. So what is it all about 
really? Why the desperation to infuse genetically-manipulating 
synthetic material into everyone through mRNA fraudulent 
‘vaccines’ with the intent of doing this over and over with the 
excuses of ‘variants’ and other ‘virus’ inventions? Dr Sherri 
Tenpenny, an osteopathic medical doctor in the United States, has 
made herself an expert on vaccines and their effects as a vehement 
campaigner against their use. Tenpenny was board certified in 
emergency medicine, the director of a level two trauma centre for 12 
years, and moved to Cleveland in 1996 to start an integrative 


medicine practice which has treated patients from all 50 states and 
some 17 other countries. Weaning people off pharmaceutical drugs is 
a speciality. 

She became interested in the consequences of vaccines after 
attending a meeting at the National Vaccine Information Center in 
Washington DC in 2000 where she ‘sat through four days of listening 
to medical doctors and scientists and lawyers and parents of vaccine 
injured kids’ and asked: ‘What's going on?’ She had never been 
vaccinated and never got ill while her father was given a list of 
vaccines to be in the military and was ‘sick his entire life’. The 
experience added to her questions and she began to examine vaccine 
documents from the Centers for Disease Control (CDC). After 
reading the first one, the 1998 version of The General Recommendations 
of Vaccination, she thought: ‘This is it?” The document was poorly 
written and bad science and Tenpenny began 20 years of research 
into vaccines that continues to this day. She began her research into 
‘Covid vaccines’ in March, 2020, and she describes them as ‘deadly’. 
For many, as we have seen, they already have been. Tenpenny said 
that in the first 30 days of the ‘vaccine’ rollout in the United States 
there had been more than 40,000 adverse events reported to the 
vaccine adverse event database. A document had been delivered to 
her the day before that was 172 pages long. ‘We have over 40,000 
adverse events; we have over 3,100 cases of [potentially deadly] 
anaphylactic shock; we have over 5,000 neurological reactions.’ 
Effects ranged from headaches to numbness, dizziness and vertigo, 
to losing feeling in hands or feet and paraesthesia which is when 
limbs ‘fall asleep’ and people have the sensation of insects crawling 
underneath their skin. All this happened in the first 30 days and 
remember that only about ten percent (or far less) of adverse reactions 
and vaccine-related deaths are estimated to be officially reported. 
Tenpenny said: 


So can you think of one single product in any industry, any industry, for as long as products 
have been made on the planet that within 30 days we have 40,000 people complaining of 
side effects that not only is still on the market but ... we’ve got paid actors telling us how great 


they are for getting their vaccine. We're offering people $500 if they will just get their vaccine 
and we've got nurses and doctors going; ‘I got the vaccine, | got the vaccine’. 


Tenpenny said they were not going to be ‘happy dancing folks’ 
when they began to suffer Bell’s palsy (facial paralysis), 
neuropathies, cardiac arrhythmias and autoimmune reactions that 
kill through a blood disorder. ‘They’re not going to be so happy, 
happy then, but we’re never going to see pictures of those people’ 
she said. Tenpenny described the ‘vaccine’ as ‘a well-designed killing 
tool’. 


No off-switch 

Bad as the initial consequences had been Tenpenny said it would be 
maybe 14 months before we began to see the ‘full ravage’ of what is 
going to happen to the ‘Covid vaccinated’ with full-out 
consequences taking anything between two years and 20 years to 
show. You can understand why when you consider that variations of 
the ‘Covid vaccine’ use mRNA (messenger RNA) to in theory 
activate the immune system to produce protective antibodies 
without using the actual ‘virus’. How can they when it’s a computer 
program and they’ve never isolated what they claim is the ‘real 
thing’? Instead they use synthetic mRNA. They are inoculating 
synthetic material into the body which through a technique known 
as the Trojan horse is absorbed into cells to change the nature of 
DNA. Human DNA is changed by an infusion of messenger RNA 
and with each new ‘vaccine’ of this type it is changed even more. Say 
so and you are banned by Cult Internet platforms. The contempt the 
contemptuous Mark Zuckerberg has for the truth and human health 
can be seen in an internal Facebook video leaked to the Project 
Veritas investigative team in which he said of the ‘Covid vaccines’: 
‘... [share some caution on this because we just don’t know the long 
term side-effects of basically modifying people’s DNA and RNA.’ At 
the same time this disgusting man’s Facebook was censoring and 
banning anyone saying exactly the same. He must go before a 
Nuremberg trial for crimes against humanity when he knows that he 


is censoring legitimate concerns and denying the right of informed 
consent on behalf of the Cult that owns him. People have been killed 
and damaged by the very ‘vaccination’ technique he cast doubt on 
himself when they may not have had the ‘vaccine’ with access to 
information that he denied them. The plan is to have at least annual 
‘Covid vaccinations’, add others to deal with invented ‘variants’, and 
change all other vaccines into the mRNA system. Pfizer executives 
told shareholders at a virtual Barclays Global Healthcare Conference 
in March, 2021, that the public may need a third dose of ‘Covid 
vaccine’, plus regular yearly boosters and the company planned to 
hike prices to milk the profits in a ‘significant opportunity for our 
vaccine’. These are the professional liars, cheats and opportunists 
who are telling you their ‘vaccine’ is safe. Given this volume of 
mRNA planned to be infused into the human body and its ability to 
then replicate we will have a transformation of human genetics from 
biological to synthetic biological — exactly the long-time Cult plan for 
reasons we'll see — and many will die. Sherri Tenpenny said of this 
replication: 


It’s like having an on-button but no off-button and that whole mechanism ... they actually 
give it aname and they call it the Trojan horse mechanism, because it allows that [synthetic] 
virus and that piece of that [synthetic] virus to get inside of your cells, start to replicate and 
even get inserted into other parts of your DNA as a Trojan-horse. 


Ask the overwhelming majority of people who have the ‘vaccine’ 
what they know about the contents and what they do and they 
would reply: ‘The government says it will stop me getting the virus.’ 
Governments give that false impression on purpose to increase take- 
up. You can read Sherri Tenpenny’s detailed analysis of the health 
consequences in her blog at Vaxxter.com, but in summary these are 
some of them. She highlights the statement by Bill Gates about how 
human beings can become their own ‘vaccine manufacturing 
machine’. The man is insane. [“Vaccine’-generated] ‘antibodies’ carry 
synthetic messenger RNA into the cells and the damage starts, 
Tenpenny contends, and she says that lungs can be adversely 
affected through varying degrees of pus and bleeding which 


obviously affects breathing and would be dubbed ‘Covid-19’. Even 
more sinister was the impact of ‘antibodies’ on macrophages, a white 
blood cell of the immune system. They consist of Type 1 and Type 2 
which have very different functions. She said Type 1 are ‘hyper- 
vigilant’ white blood cells which ‘gobble up’ bacteria etc. However, 
in doing so, this could cause inflammation and in extreme 
circumstances be fatal. She says these affects are mitigated by Type 2 
macrophages which kick in to calm down the system and stop it 
going rogue. They clear up dead tissue debris and reduce 
inflammation that the Type 1 ‘fire crews’ have caused. Type 1 kills 
the infection and Type 2 heals the damage, she says. This is her 
punchline with regard to ‘Covid vaccinations’: She says that mRNA 
‘antibodies’ block Type 2 macrophages by attaching to them and 
deactivating them. This meant that when the Type 1 response was 
triggered by infection there was nothing to stop that getting out of 
hand by calming everything down. There’s an on-switch, but no off- 
switch, she says. What follows can be ‘over and out, see you when I 
see you’. 


Genetic suicide 

Tenpenny also highlights the potential for autoimmune disease — the 
body attacking itself —- which has been associated with vaccines since 
they first appeared. Infusing a synthetic foreign substance into cells 
could cause the immune system to react in a panic believing that the 
body is being overwhelmed by an invader (it is) and the 
consequences can again be fatal. There is an autoimmune response 
known as a ‘cytokine storm’ which I have likened to a homeowner 
panicked by an intruder and picking up a gun to shoot randomly in 
all directions before turning the fire on himself. The immune system 
unleashes a storm of inflammatory response called cytokines to a 
threat and the body commits hara-kiri. The lesson is that you mess 
with the body’s immune response at your peril and these ‘vaccines’ 
seriously — fundamentally — mess with immune response. Tenpenny 
refers to a consequence called anaphylactic shock which is a severe 
and highly dangerous allergic reaction when the immune system 


floods the body with chemicals. She gives the example of having a 
bee sting which primes the immune system and makes it sensitive to 
those chemicals. When people are stung again maybe years later the 
immune response can be so powerful that it leads to anaphylactic 
shock. Tenpenny relates this ‘shock’ with regard to the ‘Covid 
vaccine’ to something called polyethylene glycol or PEG. Enormous 
numbers of people have become sensitive to this over decades of use 
in a whole range of products and processes including food, drink, 
skin creams and ‘medicine’. Studies have claimed that some 72 
percent of people have antibodies triggered by PEG compared with 
two percent in the 1960s and allergic hypersensitive reactions to this 
become a gathering cause for concern. Tenpenny points out that the 
‘mRNA vaccine’ is coated in a ‘bubble’ of polyethylene glycol which 
has the potential to cause anaphylactic shock through immune 
sensitivity. Many reports have appeared of people reacting this way 
after having the ‘Covid vaccine’. What do we think is going to 
happen as humanity has more and more of these ‘vaccines’? 
Tenpenny said: ‘All these pictures we have seen with people with 
these rashes ... these weepy rashes, big reactions on their arms and 
things like that — it’s an acute allergic reaction most likely to the 
polyethylene glycol that you’ve been previously primed and 
sensitised to.’ 

Those who have not studied the conspiracy and its perpetrators at 
length might think that making the population sensitive to PEG and 
then putting it in these ‘vaccines’ is just a coincidence. It is not. It is 
instead testament to how carefully and coldly-planned current 
events have been and the scale of the conspiracy we are dealing 
with. Tenpenny further explains that the ‘vaccine’ mRNA procedure 
can breach the blood-brain barrier which protects the brain from 
toxins and other crap that will cause malfunction. In this case they 
could make two proteins corrupt brain function to cause 
Amyotrophic lateral sclerosis (ALS) , a progressive nervous system 
disease leading to loss of muscle control, and frontal lobe 
degeneration — Alzheimer’s and dementia. Immunologist J. Bart 
Classon published a paper connecting mRNA ‘vaccines’ to prion 


disease which can lead to Alzheimer’s and other forms of 
neurogenerative disease while others have pointed out the potential 
to affect the placenta in ways that make women infertile. This will 
become highly significant in the next chapter when I will discuss 
other aspects of this non-vaccine that relate to its nanotechnology 
and transmission from the injected to the uninjected. 


Qualified in idiocy 

Tenpenny describes how research has confirmed that these ‘vaccine’- 
generated antibodies can interact with a range of other tissues in the 
body and attack many other organs including the lungs. ‘This means 
that if you have a hundred people standing in front of you that all 
got this shot they could have a hundred different symptoms.’ 
Anyone really think that Cult gofers like the Queen, Tony Blair, 
Christopher Whitty, Anthony Fauci, and all the other psychopaths 
have really had this ‘vaccine’ in the pictures we’ve seen? Not a 
bloody chance. Why don’t doctors all tell us about all these dangers 
and consequences of the ‘Covid vaccine’? Why instead do they 
encourage and pressure patients to have the shot? Don’t let’s think 
for amoment that doctors and medical staff can’t be stupid, lazy, and 
psychopathic and that’s without the financial incentives to give the 
jab. Tenpenny again: 


Some people are going to die from the vaccine directly but a large number of people are 
going to start to get horribly sick and get all kinds of autoimmune diseases 42 days to maybe a 
year out. What are they going to do, these stupid doctors who say; ‘Good for you for getting 
that vaccine.’ What are they going to say; ‘Oh, it must be a mutant, we need to give an extra 
dose of that vaccine.’ 


Because now the vaccine, instead of one dose or two doses we need three or four because the 
stupid physicians aren’t taking the time to learn anything about it. If | can learn this sitting in 
my living room reading a 19 page paper and several others so can they. There’s nothing 
special about me, | just take the time to do it. 


Remember how Sara Kayat, the NHS and TV doctor, said that the 
‘Covid vaccine’ would ‘100 percent prevent hospitalisation and 
death’. Doctors can be idiots like every other profession and they 


should not be worshipped as infallible. They are not and far from it. 
Behind many medical and scientific ‘experts’ lies an uninformed prat 
trying to hide themselves from you although in the ‘Covid’ era many 
have failed to do so as with UK narrative-repeating “TV doctor’ 
Hilary Jones. Pushing back against the minority of proper doctors 
and scientists speaking out against the ‘vaccine’ has been the entire 
edifice of the Cult global state in the form of governments, medical 
systems, corporations, mainstream media, Silicon Valley, and an 
army of compliant doctors, medical staff and scientists willing to say 
anything for money and to enhance their careers by promoting the 
party line. If you do that you are an ‘expert’ and if you won’t you are 
an ‘anti-vaxxer’ and ‘Covidiot’. The pressure to be ‘vaccinated’ is 
incessant. We have even had reports claiming that the ‘vaccine’ can 
help cure cancer and Alzheimer’s and make the lame walk. I am 
waiting for the announcement that it can bring you coffee in the 
morning and cook your tea. Just as the symptoms of ‘Covid’ seem to 
increase by the week so have the miracles of the ‘vaccine’. American 
supermarket giant Kroger Co. offered nearly 500,000 employees in 
35 states a $100 bonus for having the ‘vaccine’ while donut chain 
Krispy Kreme promised ‘vaccinated’ customers a free glazed donut 
every day for the rest of 2021. Have your DNA changed and you will 
get a doughnut although we might not have to give you them for 
long. Such offers and incentives confirm the desperation. 


Perhaps the worse vaccine-stunt of them all was UK ‘Health’ 
Secretary Matt-the-prat Hancock on live TV after watching a clip of 
someone being ‘vaccinated’ when the roll-out began. Hancock faked 
tears so badly it was embarrassing. Brain-of-Britain Piers Morgan, 
the lockdown-supporting, ‘vaccine’ supporting, ‘vaccine’ passport- 
supporting, TV host played along with Hancock — ‘You're quite 
emotional about that’ he said in response to acting so atrocious it 
would have been called out at a school nativity which will 
presumably today include Mary and Jesus in masks, wise men 
keeping their camels six feet apart, and shepherds under tent arrest. 
System-serving Morgan tweeted this: ‘Love the idea of covid vaccine 
passports for everywhere: flights, restaurants, clubs, football, gyms, 


shops etc. It’s time covid-denying, anti-vaxxer loonies had their 
bullsh*t bluff called & bar themselves from going anywhere that 
responsible citizens go.’ If only I could aspire to his genius. To think 
that Morgan, who specialises in shouting over anyone he disagrees 
with, was lauded as a free speech hero when he lost his job after 
storming off the set of his live show like a child throwing his dolly 
out of the pram. If he is a free speech hero we are in real trouble. I 
have no idea what ‘bullsh*t’ means, by the way, the * throws me 
completely. 

The Cult is desperate to infuse its synthetic DNA-changing 
concoction into everyone and has been using every lie, trick and 
intimidation to do so. The question of ‘Why?’ we shall now address. 


CHAPTER TEN 
Human 2.0 


| believe that at the end of the century the use of words and general 

educated opinion will have altered so much that one will be able to 

speak of machines thinking without expecting to be contradicted — 
Alan Turing (1912-1954), the ‘Father of artificial intelligence‘ 


have been exposing for decades the plan to transform the human 

body from a biological to a synthetic-biological state. The new 
human that I will call Human 2.0 is planned to be connected to 
artificial intelligence and a global AI ‘Smart Grid’ that would operate 
as one global system in which AI would control everything from 
your fridge to your heating system to your car to your mind. 
Humans would no longer be ‘human’, but post-human and sub- 
human, with their thinking and emotional processes replaced by AI. 

What I said sounded crazy and beyond science fiction and I could 
understand that. To any balanced, rational, mind it is crazy. Today, 
however, that world is becoming reality and it puts the ‘Covid 
vaccine’ into its true context. Ray Kurzweil is the ultra-Zionist 
‘computer scientist, inventor and futurist’ and co-founder of the 
Singularity University. Singularity refers to the merging of humans 
with machines or ‘transhumanism’. Kurzweil has said humanity 
would be connected to the cyber ‘cloud’ in the period of the ever- 
recurring year of 2030: 


Our thinking ... will be a hybrid of biological and non-biological thinking ... humans will be 
able to extend their limitations and ‘think in the cloud’ ... We’re going to put gateways to the 


cloud in our brains ... We're going to gradually merge and enhance ourselves ... In my view, 
that’s the nature of being human — we transcend our limitations. As the technology becomes 
vastly superior to what we are then the small proportion that is still human gets smaller and 
smaller and smaller until it’s just utterly negligible. 


They are trying to sell this end-of-humanity-as-we-know-it as the 
next stage of ‘evolution’ when we become super-human and ‘like the 
gods’. They are lying to you. Shocked, eh? The population, and again 
especially the young, have been manipulated into addiction to 
technologies designed to enslave them for life. First they induced an 
addiction to smartphones (holdables); next they moved to 
technology on the body (wearables); and then began the invasion of 
the body (implantables). I warned way back about the plan for 
microchipped people and we are now entering that era. We should 
not be diverted into thinking that this refers only to chips we can see. 
Most important are the nanochips known as smart dust, neural dust 
and nanobots which are far too small to be seen by the human eye. 
Nanotechnology is everywhere, increasingly in food products, and 
released into the atmosphere by the geoengineering of the skies 
funded by Bill Gates to ‘shut out the Sun’ and ‘save the planet from 
global warming’. Gates has been funding a project to spray millions 
of tonnes of chalk (calcium carbonate) into the stratosphere over 
Sweden to ‘dim the Sun’ and cool the Earth. Scientists warned the 
move could be disastrous for weather systems in ways no one can 
predict and opposition led to the Swedish space agency announcing 
that the ‘experiment’ would not be happening as planned in the 
summer of 2021; but it shows where the Cult is going with dimming 
the impact of the Sun and there’s an associated plan to change the 
planet’s atmosphere. Who gives psychopath Gates the right to 
dictate to the entire human race and dismantle planetary systems? 
The world will not be safe while this man is at large. 

The global warming hoax has made the Sun, like the gas of life, 
something to fear when both are essential to good health and human 
survival (more inversion). The body transforms sunlight into vital 
vitamin D through a process involving ... cholesterol. This is the 
cholesterol we are also told to fear. We are urged to take Big Pharma 


statin drugs to reduce cholesterol and it’s all systematic. Reducing 
cholesterol means reducing vitamin D uptake with all the multiple 
health problems that will cause. At least if you take statins long term 
it saves the government from having to pay you a pension. The 
delivery system to block sunlight is widely referred to as chemtrails 
although these have a much deeper agenda, too. They appear at first 
to be contrails or condensation trails streaming from aircraft into 
cold air at high altitudes. Contrails disperse very quickly while 
chemtrails do not and spread out across the sky before eventually 
their content falls to earth. Many times I have watched aircraft cross- 
cross a clear blue sky releasing chemtrails until it looks like a cloudy 
day. Chemtrails contain many things harmful to humans and the 
natural world including toxic heavy metals, aluminium (see 
Alzheimer’s) and nanotechnology. Ray Kurzweil reveals the reason 
without actually saying so: ‘Nanobots will infuse all the matter 
around us with information. Rocks, trees, everything will become 
these intelligent creatures.’ How do you deliver that? From the sky. 
Self-replicating nanobots would connect everything to the Smart 
Grid. The phenomenon of Morgellons disease began in the chemtrail 
era and the correlation has led to it being dubbed the ‘chemtrail 
disease’. Self-replicating fibres appear in the body that can be pulled 
out through the skin. Morgellons fibres continue to grow outside the 
body and have a form of artificial intelligence. I cover this at greater 
length in Phantom Self. 


Vaccine’ operating system 

‘Covid vaccines’ with their self-replicating synthetic material are also 
designed to make the connection between humanity and Kurzweil’s 
‘cloud’. American doctor and dedicated campaigner for truth, Carrie 
Madej, an Internal Medicine Specialist in Georgia with more than 20 
years medical experience, has highlighted the nanotechnology aspect 
of the fake ‘vaccines’. She explains how one of the components in at 
least the Moderna and Pfizer synthetic potions are ‘lipid 
nanoparticles’ which are ‘like little tiny computer bits’ — a ‘sci-fi 
substance’ known as nanobots and hydrogel which can be ‘triggered 


at any moment to deliver its payload’ and act as ‘biosensors’. The 
synthetic substance had ‘the ability to accumulate data from your 
body like your breathing, your respiration, thoughts and emotions, 
all kind of things’ and each syringe could carry a million nanobots: 


This substance because it’s like little bits of computers in your body, crazy, but it’s true, it can 
do that, [and] obviously has the ability to act through Wi-Fi. It can receive and transmit 
energy, messages, frequencies or impulses. That issue has never been addressed by these 
companies. What does that do to the human? 


Just imagine getting this substance in you and it can react to things all around you, the 5G, 
your smart device, your phones, what is happening with that? What if something is triggering 
it, too, like an impulse, a frequency? We have something completely foreign in the human 
body. 


Madej said her research revealed that electromagnetic (EMF) 
frequencies emitted by phones and other devices had increased 
dramatically in the same period of the ‘vaccine’ rollout and she was 
seeing more people with radiation problems as 5G and other 
electromagnetic technology was expanded and introduced to schools 
and hospitals. She said she was “floored with the EMF coming off’ 
the devices she checked. All this makes total sense and syncs with 
my own work of decades when you think that Moderna refers in 
documents to its mRNA ‘vaccine’ as an ‘operating system’: 


Recognizing the broad potential of mRNA science, we set out to create an MRNA technology 
platform that functions very much like an operating system on a computer. It is designed so 
that it can plug and play interchangeably with different programs. In our case, the ‘program’ 
or ‘app’ is our MRNA drug — the unique MRNA sequence that codes for a protein ... 


... Our MRNA Medicines — ‘The ‘Software Of Life’: When we have a concept for a new 
mRNA medicine and begin research, fundamental components are already in place. 
Generally, the only thing that changes from one potential MRNA medicine to another is the 
coding region — the actual genetic code that instructs ribosomes to make protein. Utilizing 
these instruction sets gives our investigational MRNA medicines a software-like quality. We 
also have the ability to combine different mRNA sequences encoding for different proteins in 
a single MRNA investigational medicine. 


Who needs a real ‘virus’ when you can create a computer version to 
justify infusing your operating system into the entire human race on 
the road to making living, breathing people into cyborgs? What is 
missed with the ‘vaccines’ is the digital connection between synthetic 
material and the body that I highlighted earlier with the study that 
hacked a computer with human DNA. On one level the body is 
digital, based on mathematical codes, and I’ll have more about that 
in the next chapter. Those who ridiculously claim that mRNA 
‘vaccines’ are not designed to change human genetics should explain 
the words of Dr Tal Zaks, chief medical officer at Moderna, in a 2017 
TED talk. He said that over the last 30 years ‘we’ve been living this 
phenomenal digital scientific revolution, and I’m here today to tell 
you, that we are actually hacking the software of life, and that it’s 
changing the way we think about prevention and treatment of 
disease’: 


In every cell there’s this thing called messenger RNA, or MRNA for short, that transmits the 
critical information from the DNA in our genes to the protein, which is really the stuff we’re 
all made out of. This is the critical information that determines what the cell will do. So we 
think about it as an operating system. So if you could change that, if you could introduce a 
line of code, or change a line of code, it turns out, that has profound implications for 
everything, from the flu to cancer. 


Zaks should more accurately have said that this has profound 
implications for the human genetic code and the nature of DNA. 
Communications within the body go both ways and not only one. 
But, hey, no, the ‘Covid vaccine’ will not affect your genetics. Cult 
fact-checkers say so even though the man who helped to develop the 
mRNA technique says that it does. Zaks said in 2017: 


If you think about what it is we’re trying to do. We’ve taken information and our 
understanding of that information and how that information is transmitted in a cell, and we’ve 
taken our understanding of medicine and how to make drugs, and we’re fusing the two. We 
think of it as information therapy. 


I have been writing for decades that the body is an information 
field communicating with itself and the wider world. This is why 


radiation which is information can change the information field of 
body and mind through phenomena like 5G and change their nature 
and function. ‘Information therapy’ means to change the body’s 
information field and change the way it operates. DNA is a receiver- 
transmitter of information and can be mutated by information like 
mRNA synthetic messaging. Technology to do this has been ready 
and waiting in the underground bases and other secret projects to be 
rolled out when the ‘Covid’ hoax was played. ‘Trials’ of such short 
and irrelevant duration were only for public consumption. When 
they say the ‘vaccine’ is ‘experimental’ that is not true. It may appear 
to be ‘experimental’ to those who don’t know what's going on, but 
the trials have already been done to ensure the Cult gets the result it 
desires. Zaks said that it took decades to sequence the human 
genome, completed in 2003, but now they could do it in a week. By 
‘they’ he means scientists operating in the public domain. In the 
secret projects they were sequencing the genome in a week long 
before even 2003. 


Deluge of mRNA 

Highly significantly the Moderna document says the guiding 
premise is that if using mRNA as a medicine works for one disease 
then it should work for many diseases. They were leveraging the 
flexibility afforded by their platform and the fundamental role 
mRNA plays in protein synthesis to pursue mRNA medicines for a 
broad spectrum of diseases. Moderna is confirming what I was 
saying through 2020 that multiple ‘vaccines’ were planned for 
‘Covid’ (and later invented ‘variants’) and that previous vaccines 
would be converted to the mRNA system to infuse the body with 
massive amounts of genetically-manipulating synthetic material to 
secure a transformation to a synthetic-biological state. The ‘vaccines’ 
are designed to kill stunning numbers as part of the long-exposed 
Cult depopulation agenda and transform the rest. Given this is the 
goal you can appreciate why there is such hysterical demand for 
every human to be ‘vaccinated’ for an alleged ‘disease’ that has an 
estimated ‘infection’ to ‘death’ ratio of 0.23-0.15 percent. As I write 


children are being given the ‘vaccine’ in trials (their parents are a 
disgrace) and ever-younger people are being offered the vaccine for 
a ‘virus’ that even if you believe it exists has virtually zero chance of 
harming them. Horrific effects of the ‘trials’ on a 12-year-old girl 
were revealed by a family member to be serious brain and gastric 
problems that included a bowel obstruction and the inability to 
swallow liquids or solids. She was unable to eat or drink without 
throwing up, had extreme pain in her back, neck and abdomen, and 
was paralysed from the waist down which stopped her urinating 
unaided. When the girl was first taken to hospital doctors said it was 
all in her mind. She was signed up for the ‘trial’ by her parents for 
whom no words suffice. None of this ‘Covid vaccine’ insanity makes 
any sense unless you see what the ‘vaccine’ really is — a body- 
changer. Synthetic biology or ‘SynBio’ is a fast-emerging and 
expanding scientific discipline which includes everything from 
genetic and molecular engineering to electrical and computer 
engineering. Synthetic biology is defined in these ways: 


e A multidisciplinary area of research that seeks to create new 
biological parts, devices, and systems, or to redesign systems that 
are already found in nature. 


e The use of a mixture of physical engineering and genetic 
engineering to create new (and therefore synthetic) life forms. 


e Anemerging field of research that aims to combine the 
knowledge and methods of biology, engineering and related 
disciplines in the design of chemically-synthesized DNA to create 
organisms with novel or enhanced characteristics and traits 
(synthetic organisms including humans). 


We now have synthetic blood, skin, organs and limbs being 
developed along with synthetic body parts produced by 3D printers. 
These are all elements of the synthetic human programme and this 
comment by Kurzweil’s co-founder of the Singularity University, 


Peter Diamandis, can be seen in a whole new light with the ‘Covid’ 
hoax and the sanctions against those that refuse the ‘vaccine’: 


Anybody who is going to be resisting the progress forward [to transhumanism] is going to be 
resisting evolution and, fundamentally, they will die out. It’s not a matter of whether it’s good 
or bad. It’s going to happen. 


‘Resisting evolution’? What absolute bollocks. The arrogance of these 
people is without limit. His ‘it’s going to happen’ mantra is another 
way of saying ‘resistance is futile’ to break the spirit of those pushing 
back and we must not fall for it. Getting this genetically- 
transforming ‘vaccine’ into everyone is crucial to the Cult plan for 
total control and the desperation to achieve that is clear for anyone 
to see. Vaccine passports are a major factor in this and they, too, are a 
form of resistance is futile. It’s NOT. The paper funded by the 
Rockefeller Foundation for the 2013 ‘health conference’ in China 
said: 


We will interact more with artificial intelligence. The use of robotics, bio-engineering to 
augment human functioning is already well underway and will advance. Re-engineering of 
humans into potentially separate and unequal forms through genetic engineering or mixed 
human-robots raises debates on ethics and equality. 


A new demography is projected to emerge after 2030 [that year again] of technologies 
(robotics, genetic engineering, nanotechnology) producing robots, engineered organisms, 
‘nanobots’ and artificial intelligence (Al) that can self-replicate. Debates will grow on the 
implications of an impending reality of human designed life. 


What is happening today is so long planned. The world army 
enforcing the will of the world government is intended to be a robot 
army, not a human one. Today’s military and its technologically 
‘enhanced’ troops, pilotless planes and driverless vehicles are just 
stepping stones to that end. Human soldiers are used as Cult fodder 
and its time they woke up to that and worked for the freedom of the 
population instead of their own destruction and their family’s 
destruction — the same with the police. Join us and let’s sort this out. 
The phenomenon of enforce my own destruction is widespread in 
the ‘Covid’ era with Woker ‘luvvies’ in the acting and entertainment 


industries supporting ‘Covid’ rules which have destroyed their 
profession and the same with those among the public who put signs 
on the doors of their businesses ‘closed due to Covid — stay safe’ 
when many will never reopen. It’s a form of masochism and most 
certainly insanity. 


Transgender = transhumanism 

When something explodes out of nowhere and is suddenly 
everywhere it is always the Cult agenda and so it is with the tidal 
wave of claims and demands that have infiltrated every aspect of 
society under the heading of ‘transgenderism’. The term ‘trans’ is so 
‘in’ and this is the dictionary definition: 


A prefix meaning ‘across’, ‘through’, occurring ... in loanwords from Latin, used in particular 
for denoting movement or conveyance from place to place (transfer; transmit; transplant) or 
complete change (transform; transmute), or to form adjectives meaning ‘crossing’, ‘on the 
other side of’, or ‘going beyond’ the place named (transmontane; transnational; trans- 
Siberian). 


Transgender means to go beyond gender and transhuman means 
to go beyond human. Both are aspects of the Cult plan to transform 
the human body to a synthetic state with no gender. Human 2.0 is not 
designed to procreate and would be produced technologically with 
no need for parents. The new human would mean the end of parents 
and so men, and increasingly women, are being targeted for the 
deletion of their rights and status. Parental rights are disappearing at 
an ever-quickening speed for the same reason. The new human 
would have no need for men or women when there is no procreation 
and no gender. Perhaps the transgender movement that appears to 
be in a permanent state of frenzy might now contemplate on how it 
is being used. This was never about transgender rights which are 
only the interim excuse for confusing gender, particularly in the 
young, on the road to fusing gender. Transgender activism is not an 
end; it is a means to an end. We see again the technique of creative 
destruction in which you destroy the status quo to “build back better’ 
in the form that you want. The gender status quo had to be 


destroyed by persuading the Cult-created Woke mentality to believe 
that you can have 100 genders or more. A programme for 9 to 12 
year olds produced by the Cult-owned BBC promoted the 100 
genders narrative. The very idea may be the most monumental 
nonsense, but it is not what is true that counts, only what you can 
make people believe is true. Once the gender of 2 + 2 = 4 has been 
dismantled through indoctrination, intimidation and 2 + 2 =5 then 
the new no-gender normal can take its place with Human 2.0. 
Aldous Huxley revealed the plan in his prophetic Brave New World in 
1932: 


Natural reproduction has been done away with and children are created, decanted’, and 
raised in ‘hatcheries and conditioning centres’. From birth, people are genetically designed to 
fit into one of five castes, which are further split into ‘Plus’ and ‘Minus’ members and designed 
to fulfil predetermined positions within the social and economic strata of the World State. 


How could Huxley know this in 1932? For the same reason George 
Orwell knew about the Big Brother state in 1948, Cult insiders I have 
quoted knew about it in 1969, and I have known about it since the 
early 1990s. If you are connected to the Cult or you work your balls 
off to uncover the plan you can predict the future. The process is 
simple. If there is a plan for the world and nothing intervenes to stop 
it then it will happen. Thus if you communicate the plan ahead of 
time you are perceived to have predicted the future, but you haven't. 
You have revealed the plan which without intervention will become 
the human future. The whole reason I have done what I have is to 
alert enough people to inspire an intervention and maybe at last that 
time has come with the Cult and its intentions now so obvious to 
anyone with a brain in working order. 


The future is here 

Technological wombs that Huxley described to replace parent 
procreation are already being developed and they are only the 
projects we know about in the public arena. Israeli scientists told The 
Times of Israel in March, 2021, that they have grown 250-cell embryos 


into mouse foetuses with fully formed organs using artificial wombs 
in a development they say could pave the way for gestating humans 
outside the womb. Professor Jacob Hanna of the Weizmann Institute 
of Science said: 


We took mouse embryos from the mother at day five of development, when they are just of 
250 cells, and had them in the incubator from day five until day 11, by which point they had 
grown all their organs. 


By day 11 they make their own blood and have a beating heart, a fully developed brain. 
Anybody would look at them and say, ‘this is clearly a mouse foetus with all the 
characteristics of a mouse.’ It’s gone from being a ball of cells to being an advanced foetus. 


A special liquid is used to nourish embryo cells in a laboratory 
dish and they float on the liquid to duplicate the first stage of 
embryonic development. The incubator creates all the right 
conditions for its development, Hanna said. The liquid gives the 
embryo ‘all the nutrients, hormones and sugars they need’ along 
with a custom-made electronic incubator which controls gas 
concentration, pressure and temperature. The cutting-edge in the 
underground bases and other secret locations will be light years 
ahead of that, however, and this was reported by the London 
Guardian in 2017: 


We are approaching a biotechnological breakthrough. Ectogenesis, the invention of a 
complete external womb, could completely change the nature of human reproduction. In 
April this year, researchers at the Children’s Hospital of Philadelphia announced their 
development of an artificial womb. 


The article was headed ‘Artificial wombs could soon be a reality. 
What will this mean for women?’ What would it mean for children is 
an even bigger question. No mother to bond with only a machine in 
preparation for a life of soulless interaction and control in a world 
governed by machines (see the Matrix movies). Now observe the 
calculated manipulations of the ‘Covid’ hoax as human interaction 
and warmth has been curtailed by distancing, isolation and fear with 
people communicating via machines on a scale never seen before. 


These are all dots in the same picture as are all the personal 
assistants, gadgets and children’s toys through which kids and 
adults communicate with AI as if it is human. The AI ‘voice’ on Sat- 
Nav should be included. All these things are psychological 
preparation for the Cult endgame. Before you can make a physical 
connection with AI you have to make a psychological connection 
and that is what people are being conditioned to do with this ever 
gathering human-Al interaction. Movies and TV programmes 
depicting the transhuman, robot dystopia relate to a phenomenon 
known as ‘pre-emptive programming’ in which the world that is 
planned is portrayed everywhere in movies, TV and advertising. 
This is conditioning the conscious and subconscious mind to become 
familiar with the planned reality to dilute resistance when it 
happens for real. What would have been a shock such is the change 
is made less so. We have young children put on the road to 
transgender transition surgery with puberty blocking drugs at an 
age when they could never be able to make those life-changing 
decisions. 

Rachel Levine, a professor of paediatrics and psychiatry who 
believes in treating children this way, became America’s highest- 
ranked openly-transgender official when she was confirmed as US 
Assistant Secretary at the Department of Health and Human 
Services after being nominated by Joe Biden (the Cult). Activists and 
governments press for laws to deny parents a say in their children’s 
transition process so the kids can be isolated and manipulated into 
agreeing to irreversible medical procedures. A Canadian father 
Robert Hoogland was denied bail by the Vancouver Supreme Court 
in 2021 and remained in jail for breaching a court order that he stay 
silent over his young teenage daughter, a minor, who was being 
offered life-changing hormone therapy without parental consent. At 
the age of 12 the girl’s ‘school counsellor’ said she may be 
transgender, referred her to a doctor and told the school to treat her 
like a boy. This is another example of state-serving schools imposing 
ever more control over children’s lives while parents have ever less. 


Contemptible and extreme child abuse is happening all over the 
world as the Cult gender-fusion operation goes into warp-speed. 


Why the war on men — and now women? 

The question about what artificial wombs mean for women should 
rightly be asked. The answer can be seen in the deletion of women’s 
rights involving sport, changing rooms, toilets and status in favour 
of people in male bodies claiming to identify as women. I can 
identify as a mountain climber, but it doesn’t mean I can climb a 
mountain any more than a biological man can be a biological 
woman. To believe so is a triumph of belief over factual reality which 
is the very perceptual basis of everything Woke. Women’s sport is 
being destroyed by allowing those with male bodies who say they 
identify as female to ‘compete’ with girls and women. Male body 
‘women’ dominate ‘women’s’ competition with their greater muscle 
mass, bone density, strength and speed. With that disadvantage 
sport for women loses all meaning. To put this in perspective nearly 
300 American high school boys can run faster than the quickest 
woman sprinter in the world. Women are seeing their previously 
protected spaces invaded by male bodies simply because they claim 
to identify as women. That's all they need to do to access all women’s 
spaces and activities under the Biden ‘Equality Act’ that destroys 
equality for women with the usual Orwellian Woke inversion. Male 
sex offenders have already committed rapes in women’s prisons after 
claiming to identify as women to get them transferred. Does this not 
matter to the Woke ‘equality’ hypocrites? Not in the least. What 
matters to Cult manipulators and funders behind transgender 
activists is to advance gender fusion on the way to the no-gender 
‘human’. When you are seeking to impose transparent nonsense like 
this, or the ‘Covid’ hoax, the only way the nonsense can prevail is 
through censorship and intimidation of dissenters, deletion of 
factual information, and programming of the unquestioning, 
bewildered and naive. You don’t have to scan the world for long to 
see that all these things are happening. 


Many women’s rights organisations have realised that rights and 
status which took such a long time to secure are being eroded and 
that it is systematic. Kara Dansky of the global Women’s Human 
Rights Campaign said that Biden’s transgender executive order 
immediately he took office, subsequent orders, and Equality Act 
legislation that followed “seek to erase women and girls in the law as 
a category’. Exactly. I said during the long ago-started war on men 
(in which many women play a crucial part) that this was going to 
turn into a war on them. The Cult is phasing out both male and 
female genders. To get away with that they are brought into conflict 
so they are busy fighting each other while the Cult completes the job 
with no unity of response. Unity, people, unity. We need unity 
everywhere. Transgender is the only show in town as the big step 
towards the no-gender human. It’s not about rights for transgender 
people and never has been. Woke political correctness is deleting 
words relating to genders to the same end. Wokers believe this is to 
be ‘inclusive’ when the opposite is true. They are deleting words 
describing gender because gender itself is being deleted by Human 
2.0. Terms like ‘man’, ‘woman’, ‘mother’ and ‘father’ are being 
deleted in the universities and other institutions to be replaced by 
the no-gender, not trans-gender, ‘individuals’ and ‘guardians’. 
Women’s rights campaigner Maria Keffler of Partners for Ethical 
Care said: “Children are being taught from kindergarten upward that 
some boys have a vagina, some girls have a penis, and that kids can 
be any gender they want to be.’ Do we really believe that suddenly 
countries all over the world at the same time had the idea of having 
drag queens go into schools or read transgender stories to very 
young children in the local library? It’s coldly-calculated confusion 
of gender on the way to the fusion of gender. Suzanne Vierling, a 
psychologist from Southern California, made another important 
point: 


Yesterday’s slave woman who endured gynecological medical experiments is today’s girl- 
child being butchered in a booming gender-transitioning sector. Ovaries removed, pushing her 
into menopause and osteoporosis, uncharted territory, and parents’ rights and authority 
decimated. 


The erosion of parental rights is a common theme in line with the 
Cult plans to erase the very concept of parents and ‘ovaries removed, 
pushing her into menopause’ means what? Those born female lose 
the ability to have children — another way to discontinue humanity 
as we know it. 


Eliminating Human 1.0 (before our very eyes) 

To pave the way for Human 2.0 you must phase out Human 1.0. This 
is happening through plummeting sperm counts and making 
women infertile through an onslaught of chemicals, radiation 
(including smartphones in pockets of men) and mRNA ‘vaccines’. 
Common agriculture pesticides are also having a devastating impact 
on human fertility. I have been tracking collapsing sperm counts in 
the books for a long time and in 2021 came a book by fertility 
scientist and reproductive epidemiologist Shanna Swan, Count 
Down: How Our Modern World Is Threatening Sperm Counts, Altering 
Male and Female Reproductive Development and Imperiling the Future of 
the Human Race. She reports how the global fertility rate dropped by 
half between 1960 and 2016 with America’s birth rate 16 percent 
below where it needs to be to sustain the population. Women are 
experiencing declining egg quality, more miscarriages, and more 
couples suffer from infertility. Other findings were an increase in 
erectile dysfunction, infant boys developing more genital 
abnormalities, male problems with conception, and plunging levels 
of the male hormone testosterone which would explain why so 
many men have lost their backbone and masculinity. This has been 
very evident during the ‘Covid’ hoax when women have been 
prominent among the Pushbackers and big strapping blokes have 
bowed their heads, covered their faces with a nappy and quietly 
submitted. Mind control expert Cathy O’Brien also points to how 
global education introduced the concept of ‘we’re all winners’ in 
sport and classrooms: ‘Competition was defused, and it in turn 
defused a sense of fighting back.’ This is another version of the 
‘equity’ doctrine in which you drive down rather than raise up. 
What a contrast in Cult-controlled China with its global ambitions 


where the government published plans in January, 2021, to ‘cultivate 
masculinity’ in boys from kindergarten through to high school in the 
face of a ‘masculinity crisis’. A government adviser said boys would 
be soon become ‘delicate, timid and effeminate’ unless action was 
taken. Don’t expect any similar policy in the targeted West. A 2006 
study showed that a 65-year-old man in 2002 had testosterone levels 
15 percent lower than a 65-year-old man in 1987 while a 2020 study 
found a similar story with young adults and adolescents. Men are 
getting prescriptions for testosterone replacement therapy which 
causes an even greater drop in sperm count with up to 99 percent 
seeing sperm counts drop to zero during the treatment. More sperm 
is defective and malfunctioning with some having two heads or not 
pursuing an egg. 

A class of synthetic chemicals known as phthalates are being 
blamed for the decline. These are found everywhere in plastics, 
shampoos, cosmetics, furniture, flame retardants, personal care 
products, pesticides, canned foods and even receipts. Why till 
receipts? Everyone touches them. Let no one delude themselves that 
all this is not systematic to advance the long-time agenda for human 
body transformation. Phthalates mimic hormones and disrupt the 
hormone balance causing testosterone to fall and genital birth 
defects in male infants. Animals and fish have been affected in the 
same way due to phthalates and other toxins in rivers. When fish 
turn gay or change sex through chemicals in rivers and streams it is 
a pointer to why there has been such an increase in gay people and 
the sexually confused. It doesn’t matter to me what sexuality people 
choose to be, but if it’s being affected by chemical pollution and 
consumption then we need to know. Does anyone really think that 
this is not connected to the transgender agenda, the war on men and 
the condemnation of male ‘toxic masculinity’? You watch this being 
followed by ‘toxic femininity’. It’s already happening. When 
breastfeeding becomes ‘chest-feeding’, pregnant women become 
pregnant people along with all the other Woke claptrap you know 
that the world is going insane and there’s a Cult scam in progress. 
Transgender activists are promoting the Cult agenda while Cult 


billionaires support and fund the insanity as they laugh themselves 
to sleep at the sheer stupidity for which humans must be infamous 
in galaxies far, far away. 


‘Covid vaccines’ and female infertility 

We can now see why the ‘vaccine’ has been connected to potential 
infertility in women. Dr Michael Yeadon, former Vice President and 
Chief Scientific Advisor at Pfizer, and Dr Wolfgang Wodarg in 
Germany, filed a petition with the European Medicines Agency in 
December, 2020, urging them to stop trials for the Pfizer/BioNTech 
shot and all other mRNA trials until further studies had been done. 
They were particularly concerned about possible effects on fertility 
with ‘vaccine’-produced antibodies attacking the protein Syncytin-1 
which is responsible for developing the placenta. The result would 
be infertility ‘of indefinite duration’ in women who have the 
‘vaccine’ with the placenta failing to form. Section 10.4.2 of the 
Pfizer/BioNTech trial protocol says that pregnant women or those 
who might become so should not have mRNA shots. Section 10.4 
warns men taking mRNA shots to ‘be abstinent from heterosexual 
intercourse’ and not to donate sperm. The UK government said that 
it did not know if the mRNA procedure had an effect on fertility. Did 
not know? These people have to go to jail. UK government advice did 
not recommend at the start that pregnant women had the shot and 
said they should avoid pregnancy for at least two months after 
‘vaccination’. The ‘advice’ was later updated to pregnant women 
should only have the ‘vaccine’ if the benefits outweighed the risks to 
mother and foetus. What the hell is that supposed to mean? Then 
‘spontaneous abortions’ began to appear and rapidly increase on the 
adverse reaction reporting schemes which include only a fraction of 
adverse reactions. Thousands and ever-growing numbers of 
‘vaccinated’ women are describing changes to their menstrual cycle 
with heavier blood flow, irregular periods and menstruating again 
after going through the menopause — all links to reproduction 
effects. Women are passing blood clots and the lining of their uterus 
while men report erectile dysfunction and blood effects. Most 


significantly of all unvaccinated women began to report similar 
menstrual changes after interaction with ‘vaccinated’ people and men 
and children were also affected with bleeding noses, blood clots and 
other conditions. ‘Shedding’ is when vaccinated people can emit the 
content of a vaccine to affect the unvaccinated, but this is different. 
‘Vaccinated’ people were not shedding a ‘live virus’ allegedly in 
‘vaccines’ as before because the fake ‘Covid vaccines’ involve 
synthetic material and other toxicity. Doctors exposing what is 
happening prefer the term ‘transmission’ to shedding. Somehow 
those that have had the shots are transmitting effects to those that 
haven't. Dr Carrie Madej said the nano-content of the ‘vaccines’ can 
‘act like an antenna’ to others around them which fits perfectly with 
my own conclusions. This ‘vaccine’ transmission phenomenon was 
becoming known as the book went into production and I deal with 
this further in the Postscript. 


Vaccine effects on sterility are well known. The World Health 
Organization was accused in 2014 of sterilising millions of women in 
Kenya with the evidence confirmed by the content of the vaccines 
involved. The same WHO behind the ‘Covid’ hoax admitted its 
involvement for more than ten years with the vaccine programme. 
Other countries made similar claims. Charges were lodged by 
Tanzania, Nicaragua, Mexico, and the Philippines. The Gardasil 
vaccine claimed to protect against a genital ‘virus’ known as HPV 
has also been linked to infertility. Big Pharma and the WHO (same 
thing) are criminal and satanic entities. Then there’s the Bill Gates 
Foundation which is connected through funding and shared 
interests with 20 pharmaceutical giants and laboratories. He stands 
accused of directing the policy of United Nations Children’s Fund 
(UNICEF), vaccine alliance GAVI, and other groupings, to advance 
the vaccine agenda and silence opposition at great cost to women 
and children. At the same time Gates wants to reduce the global 
population. Coincidence? 


Great Reset = Smart Grid = new human 


The Cult agenda I have been exposing for 30 years is now being 
openly promoted by Cult assets like Gates and Klaus Schwab of the 
World Economic Forum under code-terms like the ‘Great Reset’, 
‘Build Back Better’ and ‘a rare but narrow window of opportunity to 
reflect, reimagine, and reset our world’. What provided this ‘rare but 
narrow window of opportunity’? The ‘Covid’ hoax did. Who created 
that? They did. My books from not that long ago warned about the 
planned ‘Internet of Things’ (loT) and its implications for human 
freedom. This was the plan to connect all technology to the Internet 
and artificial intelligence and today we are way down that road with 
an estimated 36 billion devices connected to the World Wide Web 
and that figure is projected to be 76 billion by 2025. I further warned 
that the Cult planned to go beyond that to the Internet of Everything 
when the human brain was connected via AI to the Internet and 
Kurzweil’s ‘cloud’. Now we have Cult operatives like Schwab calling 
for precisely that under the term ‘Internet of Bodies’, a fusion of the 
physical, digital and biological into one centrally-controlled Smart 
Grid system which the Cult refers to as the ‘Fourth Industrial 
Revolution’. They talk about the ‘biological’, but they really mean 
the synthetic-biological which is required to fully integrate the 
human body and brain into the Smart Grid and artificial intelligence 
planned to replace the human mind. We have everything being 
synthetically manipulated including the natural world through 
GMO and smart dust, the food we eat and the human body itself 
with synthetic ‘vaccines’. I said in The Answer that we would see the 
Cult push for synthetic meat to replace animals and in February, 
2021, the so predictable psychopath Bill Gates called for the 
introduction of synthetic meat to save us all from ‘climate change’. 
The climate hoax just keeps on giving like the ‘Covid’ hoax. The war 
on meat by vegan activists is a carbon (oops, sorry) copy of the 
manipulation of transgender activists. They have no idea (except 
their inner core) that they are being used to promote and impose the 
agenda of the Cult or that they are only the vehicle and not the reason. 
This is not to say those who choose not to eat meat shouldn’t be 
respected and supported in that right, but there are ulterior motives 


for those in power. A Forbes article in December, 2019, highlighted 
the plan so beloved of Schwab and the Cult under the heading: 
‘What Is The Internet of Bodies? And How Is It Changing Our 
World?’ The article said the human body is the latest data platform 
(remember ‘our vaccine is an operating system’). Forbes described 
the plan very accurately and the words could have come straight out 
of my books from long before: 


The Internet of Bodies (loB) is an extension of the loT and basically connects the human body 
to a network through devices that are ingested, implanted, or connected to the body in some 
way. Once connected, data can be exchanged, and the body and device can be remotely 
monitored and controlled. 


They were really describing a human hive mind with human 
perception centrally-dictated via an AI connection as well as 
allowing people to be ‘remotely monitored and controlled’. 
Everything from a fridge to a human mind could be directed from a 
central point by these insane psychopaths and ‘Covid vaccines’ are 
crucial to this. Forbes explained the process I mentioned earlier of 
holdable and wearable technology followed by implantable. The 
article said there were three generations of the Internet of Bodies that 
include: 


¢ Body external: These are wearable devices such as Apple Watches 
or Fitbits that can monitor our health. 


¢ Body internal: These include pacemakers, cochlear implants, and 
digital pills that go inside our bodies to monitor or control various 
aspects of health. 


¢ Body embedded: The third generation of the Internet of Bodies is 
embedded technology where technology and the human body are 
melded together and have a real-time connection to a remote 
machine. 


Forbes noted the development of the Brain Computer Interface (BCI) 
which merges the brain with an external device for monitoring and 
controlling in real-time. ‘The ultimate goal is to help restore function 
to individuals with disabilities by using brain signals rather than 
conventional neuromuscular pathways.’ Oh, do fuck off. The goal of 
brain interface technology is controlling human thought and 
emotion from the central point in a hive mind serving its masters 
wishes. Many people are now agreeing to be chipped to open doors 
without a key. You can recognise them because they’ll be wearing a 
mask, social distancing and lining up for the ‘vaccine’. The Cult 
plans a Great Reset money system after they have completed the 
demolition of the global economy in which ‘money’ will be 
exchanged through communication with body operating systems. 
Rand Corporation, a Cult-owned think tank, said of the Internet of 
Bodies or IoB: 


Internet of Bodies technologies fall under the broader loT umbrella. But as the name suggests, 
loB devices introduce an even more intimate interplay between humans and gadgets. loB 
devices monitor the human body, collect health metrics and other personal information, and 
transmit those data over the Internet. Many devices, such as fitness trackers, are already in use 
... loB devices ... and those in development can track, record, and store users’ whereabouts, 
bodily functions, and what they see, hear, and even think. 


Schwab’s World Economic Forum, a long-winded way of saying 
‘fascism’ or ‘the Cult’, has gone full-on with the Internet of Bodies in 
the ‘Covid’ era. ‘We’re entering the era of the Internet of Bodies’, it 
declared, ‘collecting our physical data via a range of devices that can 
be implanted, swallowed or worn’. The result would be a huge 
amount of health-related data that could improve human wellbeing 
around the world, and prove crucial in fighting the “‘Covid-19 
pandemic’. Does anyone think these clowns care about ‘human 
wellbeing’ after the death and devastation their pandemic hoax has 
purposely caused? Schwab and co say we should move forward with 
the Internet of Bodies because ‘Keeping track of symptoms could 
help us stop the spread of infection, and quickly detect new cases’. 
How wonderful, but keeping track’ is all they are really bothered 


about. Researchers were investigating if data gathered from 
smartwatches and similar devices could be used as viral infection 
alerts by tracking the user’s heart rate and breathing. Schwab said in 
his 2018 book Shaping the Future of the Fourth Industrial Revolution: 


The lines between technologies and beings are becoming blurred and not just by the ability to 
create lifelike robots or synthetics. Instead it is about the ability of new technologies to literally 
become part of us. Technologies already influence how we understand ourselves, how we 
think about each other, and how we determine our realities. As the technologies ... give us 
deeper access to parts of ourselves, we may begin to integrate digital technologies into our 
bodies. 


You can see what the game is. Twenty-four hour control and people 
— if you could still call them that — would never know when 
something would go ping and take them out of circulation. It’s the 
most obvious rush to a global fascist dictatorship and the complete 
submission of humanity and yet still so many are locked away in 
their Cult-induced perceptual coma and can’t see it. 


Smart Grid control centres 

The human body is being transformed by the ‘vaccines’ and in other 
ways into a synthetic cyborg that can be attached to the global Smart 
Grid which would be controlled from a central point and other sub- 
locations of Grid manipulation. Where are these planned to be? Well, 
China for a start which is one of the Cult’s biggest centres of 
operation. The technological control system and technocratic rule 
was incubated here to be unleashed across the world after the 
‘Covid’ hoax came out of China in 2020. Another Smart Grid location 
that will surprise people new to this is Israel. I have exposed in The 
Trigger how Sabbatian technocrats, intelligence and military 
operatives were behind the horrors of 9/11 and not 19 Arab hijackers’ 
who somehow manifested the ability to pilot big passenger airliners 
when instructors at puddle-jumping flying schools described some 
of them as a joke. The 9/11 attacks were made possible through 
control of civilian and military air computer systems and those of the 
White House, Pentagon and connected agencies. See The Trigger — it 


will blow your mind. The controlling and coordinating force were 
the Sabbatian networks in Israel and the United States which by then 
had infiltrated the entire US government, military and intelligence 
system. The real name of the American Deep State is ‘Sabbatian 
State’. Israel is a tiny country of only nine million people, but it is 
one of the global centres of cyber operations and fast catching Silicon 
Valley in importance to the Cult. Israel is known as the ‘start-up 
nation’ for all the cyber companies spawned there with the 
Sabbatian specialisation of ‘cyber security’ that I mentioned earlier 
which gives those companies access to computer systems of their 
clients in real time through ‘backdoors’ written into the coding when 
security software is downloaded. The Sabbatian centre of cyber 
operations outside Silicon Valley is the Israeli military Cyber 
Intelligence Unit, the biggest infrastructure project in Israel’s history, 
headquartered in the desert-city of Beersheba and involving some 
20,000 ‘cyber soldiers’. Here are located a literal army of Internet 
trolls scanning social media, forums and comment lists for anyone 
challenging the Cult agenda. The UK military has something similar 
with its 77th Brigade and associated operations. The Beersheba 
complex includes research and development centres for other Cult 
operations such as Intel, Microsoft, IBM, Google, Apple, Hewlett- 
Packard, Cisco Systems, Facebook and Motorola. Techcrunch.com 
ran an article about the Beersheba global Internet technology centre 
headlined ‘Israel’s desert city of Beersheba is turning into a cybertech 
oasis’: 


The military’s massive relocation of its prestigious technology units, the presence of 
multinational and local companies, a close proximity to Ben Gurion University and generous 
government subsidies are turning Beersheba into a major global cybertech hub. Beersheba has 
all of the ingredients of a vibrant security technology ecosystem, including Ben Gurion 
University with its graduate program in cybersecurity and Cyber Security Research Center, and 
the presence of companies such as EMC, Deutsche Telekom, PayPal, Oracle, IBM, and 
Lockheed Martin. It’s also the future home of the INCB (Israeli National Cyber Bureau); offers 
a special income tax incentive for cyber security companies, and was the site for the 
relocation of the army’s intelligence corps units. 


Sabbatians have taken over the cyber world through the following 
process: They scan the schools for likely cyber talent and develop 
them at Ben Gurion University and their period of conscription in 
the Israeli Defense Forces when they are stationed at the Beersheba 
complex. When the cyber talented officially leave the army they are 
funded to start cyber companies with technology developed by 
themselves or given to them by the state. Much of this is stolen 
through backdoors of computer systems around the world with 
America top of the list. Others are sent off to Silicon Valley to start 
companies or join the major ones and so we have many major 
positions filled by apparently ‘Jewish’ but really Sabbatian 
operatives. Google, YouTube and Facebook are all run by ‘Jewish’ 
CEOs while Twitter is all but run by ultra-Zionist hedge-fund shark 
Paul Singer. At the centre of the Sabbatian global cyber web is the 
Israeli army’s Unit 8200 which specialises in hacking into computer 
systems of other countries, inserting viruses, gathering information, 
instigating malfunction, and even taking control of them from a 
distance. A long list of Sabbatians involved with 9/11, Silicon Valley 
and Israeli cyber security companies are operatives of Unit 8200. 
This is not about Israel. It’s about the Cult. Israel is planned to be a 
Smart Grid hub as with China and what is happening at Beersheba is 
not for the benefit of Jewish people who are treated disgustingly by 
the Sabbatian elite that control the country. A glance at the 
Nuremberg Codes will tell you that. 

The story is much bigger than ‘Covid’, important as that is to 
where we are being taken. Now, though, it’s time to really strap in. 
There’s more ... much more ... 


CHAPTER ELEVEN 


Awake, arise or be forever fall’n 
John Milton, Paradise Lost 


[rave exposed this far the level of the Cult conspiracy that operates 

in the world of the seen and within the global secret society and 
satanic network which operates in the shadows one step back from 
the seen. The story, however, goes much deeper than that. 

The ‘Covid’ hoax is major part of the Cult agenda, but only part, 
and to grasp the biggest picture we have to expand our attention 
beyond the realm of human sight and into the infinity of possibility 
that we cannot see. It is from here, ultimately, that humanity is being 
manipulated into a state of total control by the force which dictates 
the actions of the Cult. How much of reality can we see? Next to 
damn all is the answer. We may appear to see all there is to see in the 
‘space’ our eyes survey and observe, but little could be further from 
the truth. The human ‘world’ is only a tiny band of frequency that 
the body’s visual and perceptual systems can decode into perception 
of a ‘world’. According to mainstream science the electromagnetic 
spectrum is 0.005 percent of what exists in the Universe (Fig 10). The 
maximum estimate I have seen is 0.5 percent and either way it’s 
miniscule. I say it is far, far, smaller even than 0.005 percent when 
you compare reality we see with the totality of reality that we don't. 
Now get this if you are new to such information: Visible light, the 
only band of frequency that we can see, is a fraction of the 0.005 


percent (Fig 11 overleaf). Take this further and realise that our 
universe is one of infinite universes and that universes are only a 
fragment of overall reality — infinite reality. Then compare that with 
the almost infinitesimal frequency band of visible light or human 
sight. You see that humans are as near blind as it is possible to be 
without actually being so. Artist and filmmaker, Sergio Toporek, 
said: 
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Figure 10: Humans can perceive such a tiny band of visual reality it’s laughable. 
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Figure 11: We can see a smear of the 0.005 percent electromagnetic spectrum, but we still 
know it all. Yep, makes sense. 


Consider that you can see less than 1% of the electromagnetic spectrum and hear less than 
1% of the acoustic spectrum. 90% of the cells in your body carry their own microbial DNA 
and are not ‘you’. The atoms in your body are 99.9999999999999999% empty space and 
none of them are the ones you were born with ... Human beings have 46 chromosomes, two 
less than a potato. 


The existence of the rainbow depends on the conical photoreceptors in your eyes; to animals 
without cones, the rainbow does not exist. So you don’t just look at a rainbow, you create it. 
This is pretty amazing, especially considering that all the beautiful colours you see represent 
less than 1% of the electromagnetic spectrum. 


Suddenly the ‘world’ of humans looks a very different place. Take 
into account, too, that Planet Earth when compared with the 
projected size of this single universe is the equivalent of a billionth of 
a pinhead. Imagine the ratio that would be when compared to 
infinite reality. To think that Christianity once insisted that Earth and 
humanity were the centre of everything. This background is vital if 
we are going to appreciate the nature of ‘human’ and how we can be 
manipulated by an unseen force. To human visual reality virtually 
everything is unseen and yet the prevailing perception within the 
institutions and so much of the public is that if we can’t see it, touch 
it, hear it, taste it and smell it then it cannot exist. Such perception is 
indoctrinated and encouraged by the Cult and its agents because it 
isolates believers in the strictly limited, village-idiot, realm of the five 
senses where perceptions can be firewalled and information 
controlled. Most of those perpetuating the ‘this-world-is-all-there-is’ 
insanity are themselves indoctrinated into believing the same 
delusion. While major players and influencers know that official 
reality is laughable most of those in science, academia and medicine 
really believe the nonsense they peddle and teach succeeding 
generations. Those who challenge the orthodoxy are dismissed as 
nutters and freaks to protect the manufactured illusion from 
exposure. Observe the dynamic of the ‘Covid’ hoax and you will see 
how that takes the same form. The inner-circle psychopaths knows 
it’s a gigantic scam, but almost the entirety of those imposing their 
fascist rules believe that ‘Covid’ is all that they’re told it is. 


Stolen identity 

Ask people who they are and they will give you their name, place of 
birth, location, job, family background and life story. Yet that is not 
who they are — it is what they are experiencing. The difference is 
absolutely crucial. The true ‘I’, the eternal, infinite ‘Tl’, is consciousness, 


a state of being aware. Forget ‘form’. That is a vehicle for a brief 
experience. Consciousness does not come from the brain, but through 
the brain and even that is more symbolic than literal. We are 
awareness, pure awareness, and this is what withdraws from the 
body at what we call ‘death’ to continue our eternal beingness, 
isness, in other realms of reality within the limitlessness of infinity or 
the Biblical ‘many mansions in my father’s house’. Labels of a 
human life, man, woman, transgender, black, white, brown, 
nationality, circumstances and income are not who we are. They are 
what we are — awareness — is experiencing in a brief connection with a 
band of frequency we call ‘human’. The labels are not the self; they 
are, to use the title of one of my books, a Phantom Self. Iam not 
David Icke born in Leicester, England, on April 29th, 1952. Iam the 
consciousness having that experience. The Cult and its non-human 
masters seek to convince us through the institutions of ‘education’, 
science, medicine, media and government that what we are 
experiencing is who we are. It’s so easy to control and direct 
perception locked away in the bewildered illusions of the five senses 
with no expanded radar. Try, by contrast, doing the same with a 
humanity aware of its true self and its true power to consciously 
create its reality and experience. How is it possible to do this? We do 
it all day every day. If you perceive yourself as ‘little me’ with no 
power to impact upon your life and the world then your life 
experience will reflect that. You will hand the power you don’t think 
you have to authority in all its forms which will use it to control your 
experience. This, in turn, will appear to confirm your perception of 
‘little me’ in a self-fulfilling feedback loop. But that is what ‘little me’ 
really is — a perception. We are all ‘big-me’, infinite me, and the Cult 
has to make us forget that if its will is to prevail. We are therefore 
manipulated and pressured into self-identifying with human labels 
and not the consciousness/awareness experiencing those human 
labels. 

The phenomenon of identity politics is a Cult-instigated 
manipulation technique to sub-divide previous labels into even 
smaller ones. A United States university employs this list of letters to 


describe student identity: LGBTTQQFAGPBDSM or lesbian, gay, 
bisexual, transgender, transsexual, queer, questioning, flexual, 
asexual, gender-fuck, polyamorous, bondage/discipline, 
dominance/submission and sadism/masochism. I’m sure other lists 
are even longer by now as people feel the need to self-identity the ‘T’ 
with the minutiae of race and sexual preference. Wokers 
programmed by the Cult for generations believe this is about 
‘inclusivity’ when it’s really the Cult locking them away into smaller 
and smaller versions of Phantom Self while firewalling them from 
the influence of their true self, the infinite, eternal ‘I’. You may notice 
that my philosophy which contends that we are all unique points of 
attention/awareness within the same infinite whole or Oneness is the 
ultimate non-racism. The very sense of Oneness makes the 
judgement of people by their body-type, colour or sexuality utterly 
ridiculous and confirms that racism has no understanding of reality 
(including anti-white racism). Yet despite my perception of life Cult 
agents and fast-asleep Wokers label me racist to discredit my 
information while they are themselves phenomenally racist and 
sexist. All they see is race and sexuality and they judge people as 
good or bad, demons or untouchables, by their race and sexuality. 
All they see is Phantom Self and perceive themselves in terms of 
Phantom Self. They are pawns and puppets of the Cult agenda to 
focus attention and self-identity in the five senses and play those 
identities against each other to divide and rule. Columbia University 
has introduced segregated graduations in another version of social 
distancing designed to drive people apart and teach them that 
different racial and cultural groups have nothing in common with 
each other. The last thing the Cult wants is unity. Again the pump- 
primers of this will be Cult operatives in the knowledge of what they 
are doing, but the rest are just the Phantom Self blind leading the 
Phantom Self blind. We do have something in common - we are all 
the same consciousness having different temporary experiences. 


Yes, what is ‘human’? That is what we are supposed to be, right? I 
mean ‘human’? True, but ‘human’ is the experience not the ‘I’. Break 
it down to basics and ‘human’ is the way that information is 
processed. If we are to experience and interact with this band of 
frequency we call the ‘world’ we must have a vehicle that operates 
within that band of frequency. Our consciousness in its prime form 
cannot do that; it is way beyond the frequency of the human realm. 
My consciousness or awareness could not tap these keys and pick up 
the cup in front of me in the same way that radio station A cannot 
interact with radio station B when they are on different frequencies. 
The human body is the means through which we have that 
interaction. I have long described the body as a biological computer 
which processes information in a way that allows consciousness to 
experience this reality. The body is a receiver, transmitter and 
processor of information in a particular way that we call human. We 
visually perceive only the world of the five senses in a wakened state 
— that is the limit of the body’s visual decoding system. In truth it’s 
not even visual in the way we experience ‘visual reality’ as I will 
come to in a moment. We are ‘human’ because the body processes 
the information sources of human into a reality and behaviour 
system that we perceive as human. Why does an elephant act like an 
elephant and not like a human or a duck? The elephant'’s biological 
computer is a different information field and processes information 
according to that program into a visual and behaviour type we call 
an elephant. The same applies to everything in our reality. These 
body information fields are perpetuated through procreation (like 
making a copy of a software program). The Cult wants to break that 
cycle and intervene technologically to transform the human 
information field into one that will change what we call humanity. If 
it can change the human information field it will change the way 
that field processes information and change humanity both 
‘physically’ and psychologically. Hence the messenger (information) 
RNA ‘vaccines’ and so much more that is targeting human genetics 
by changing the body’s information — messaging — construct through 
food, drink, radiation, toxicity and other means. 


Reality that we experience is nothing like reality as it really is in 
the same way that the reality people experience in virtual reality 
games is not the reality they are really living in. The game is only a 
decoded source of information that appears to be a reality. Our 
world is also an information construct — a simulation (more later). In 
its base form our reality is a wavefield of information much the same 
in theme as Wi-Fi. The five senses decode wavefield information into 
electrical information which they communicate to the brain to 
decode into holographic (illusory ‘physical’) information. Different 
parts of the brain specialise in decoding different senses and the 
information is fused into a reality that appears to be outside of us 
but is really inside the brain and the genetic structure in general (Fig 
12 overleaf). DNA is a receiver-transmitter of information and a vital 
part of this decoding process and the body’s connection to other 
realities. Change DNA and you change the way we decode and 
connect with reality — see ‘Covid vaccines’. Think of computers 
decoding Wi-Fi. You have information encoded in a radiation field 
and the computer decodes that information into a very different 
form on the screen. You can’t see the Wi-Fi until its information is 
made manifest on the screen and the information on the screen is 
inside the computer and not outside. I have just described how we 
decode the ‘human world’. All five senses decode the waveform ‘Wi- 
Fi’ field into electrical signals and the brain (computer) constructs 
reality inside the brain and not outside — “You don’t just look at a 
rainbow, you create it’. Sound is a simple example. We don’t hear 
sound until the brain decodes it. Waveform sound waves are picked 
up by the hearing sense and communicated to the brain in an 
electrical form to be decoded into the sounds that we hear. 
Everything we hear is inside the brain along with everything we see, 
feel, smell and taste. Words and language are waveform fields 
generated by our vocal chords which pass through this process until 
they are decoded by the brain into words that we hear. Different 
languages are different frequency fields or sound waves generated 
by vocal chords. Late British philosopher Alan Watts said: 


Figure 12: The brain receives information from the five senses and constructs from that our 
perceived reality. 


[Without the brain] the world is devoid of light, heat, weight, solidity, motion, space, time or 
any other imaginable feature. All these phenomena are interactions, or transactions, of 
vibrations with a certain arrangement of neurons. 


That’s exactly what they are and scientist Robert Lanza describes in 
his book, Biocentrism, how we decode electromagnetic waves and 
energy into visual and ‘physical’ experience. He uses the example of 
a flame emitting photons, electromagnetic energy, each pulsing 
electrically and magnetically: 


... these ... invisible electromagnetic waves strike a human retina, and if (and only if) the 
waves happen to measure between 400 and 700 nano meters in length from crest to crest, 
then their energy is just right to deliver a stimulus to the 8 million cone-shaped cells in the 
retina. 


Each in turn send an electrical pulse to a neighbour neuron, and on up the line this goes, at 
250 mph, until it reaches the ... occipital lobe of the brain, in the back of the head. There, a 
cascading complex of neurons fire from the incoming stimuli, and we subjectively perceive 
this experience as a yellow brightness occurring in a place we have been conditioned to call 
the ‘external world’. 


You hear what you decode 


If a tree falls or a building collapses they make no noise unless 
someone is there to decode the energetic waves generated by the 
disturbance into what we call sound. Does a falling tree make a 
noise? Only if you hear it — decode it. Everything in our reality is a 
frequency field of information operating within the overall ‘Wi-Fi’ 
field that I call The Field. A vibrational disturbance is generated in 
The Field by the fields of the falling tree or building. These 
disturbance waves are what we decode into the sound of them 
falling. If no one is there to do that then neither will make any noise. 
Reality is created by the observer — decoder — and the perceptions of 
the observer affect the decoding process. For this reason different 
people — different perceptions — will perceive the same reality or 
situation in a different way. What one may perceive as a nightmare 
another will see as an opportunity. The question of why the Cult is 
so focused on controlling human perception now answers itself. All 
experienced reality is the act of decoding and we don’t experience 
Wi-Fi until it is decoded on the computer screen. The sight and 
sound of an Internet video is encoded in the Wi-Fi all around us, but 
we don’t see or hear it until the computer decodes that information. 
Taste, smell and touch are all phenomena of the brain as a result of 
the same process. We don’t taste, smell or feel anything except in the 
brain and there are pain relief techniques that seek to block the 
signal from the site of discomfort to the brain because if the brain 
doesn’t decode that signal we don’t feel pain. Pain is in the brain and 
only appears to be at the point of impact thanks to the feedback loop 
between them. We don’t see anything until electrical information 
from the sight senses is decoded in an area at the back of the brain. If 
that area is damaged we can go blind when our eyes are perfectly 
okay. So why do we go blind if we damage an eye? We damage the 
information processing between the waveform visual information 
and the visual decoding area of the brain. If information doesn’t 
reach the brain in a form it can decode then we can’t see the visual 
reality that it represents. What’s more the brain is decoding only a 
fraction of the information it receives and the rest is absorbed by the 


sub-conscious mind. This explanation is from the science magazine, 
Wonderpedia: 


Every second, 11 million sensations crackle along these [brain] pathways ... The brain is 
confronted with an alarming array of images, sounds and smells which it rigorously filters 
down until it is left with a manageable list of around 40. Thus 40 sensations per second make 
up what we perceive as reality. 


The ‘world’ is not what people are told to believe that is it and the 
inner circles of the Cult know that. 


illusory ‘physical reality 

We can only see a smear of 0.005 percent of the Universe which is 
only one of a vast array of universes — ‘mansions’ — within infinite 
reality. Even then the brain decodes only 40 pieces of information 
(‘sensations’) from a potential 11 million that we receive every 
second. Two points strike you from this immediately: The sheer 
breathtaking stupidity of believing we know anything so rigidly that 
there’s nothing more to know; and the potential for these processes 
to be manipulated by a malevolent force to control the reality of the 
population. One thing I can say for sure with no risk of contradiction 
is that when you can perceive an almost indescribable fraction of 
infinite reality there is always more to know as in tidal waves of it. 
Ancient Greek philosopher Socrates was so right when he said that 
wisdom is to know how little we know. How obviously true that is 
when you think that we are experiencing a physical world of solidity 
that is neither physical nor solid and a world of apartness when 
everything is connected. Cult-controlled ‘science’ dismisses the so- 
called ‘paranormal’ and all phenomena related to that when the 
‘para’-normal is perfectly normal and explains the alleged ‘great 
mysteries’ which dumbfound scientific minds. There is a reason for 
this. A ‘scientific mind’ in terms of the mainstream is a material 
mind, a five-sense mind imprisoned in see it, touch it, hear it, smell it 
and taste it. Phenomena and happenings that can’t be explained that 
way leave the ‘scientific mind’ bewildered and the rule is that if they 


can’t account for why something is happening then it can’t, by 
definition, be happening. I beg to differ. Telepathy is thought waves 
passing through The Field (think wave disturbance again) to be 
decoded by someone able to connect with that wavelength 
(information). For example: You can pick up the thought waves of a 
friend at any distance and at the very least that will bring them to 
mind. A few minutes later the friend calls you. ‘My god’, you say, 
‘that’s incredible — I was just thinking of you.’ Ah, but they were 
thinking of you before they made the call and that’s what you 
decoded. Native peoples not entrapped in five-sense reality do this 
so well it became known as the ‘bush telegraph’. Those known as 
psychics and mediums (genuine ones) are doing the same only 
across dimensions of reality. ‘Mind over matter’ comes from the fact 
that matter and mind are the same. The state of one influences the 
state of the other. Indeed one and the other are illusions. They are 
aspects of the same field. Paranormal phenomena are all explainable 
so why are they still considered ‘mysteries’ or not happening? Once 
you go down this road of understanding you begin to expand 
awareness beyond the five senses and that’s the nightmare for the 
Cult. 


Figure 13: Holograms are not solid, but the best ones appear to be. 
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Figure 14: How holograms are created by capturing a waveform version of the subject image. 


Holographic ‘solidity 

Our reality is not solid, it is holographic. We are now well aware of 
holograms which are widely used today. Two-dimensional 
information is decoded into a three-dimensional reality that is not 
solid although can very much appear to be (Fig 13). Holograms are 
created with a laser divided into two parts. One goes directly onto a 
holographic photographic print (‘reference beam’) and the other 
takes a waveform image of the subject (‘working beam’) before being 
directed onto the print where it ‘collides’ with the other half of the 
laser (Fig 14). This creates a waveform interference pattern which 
contains the wavefield information of whatever is being 
photographed (Fig 15 overleaf). The process can be likened to 
dropping pebbles in a pond. Waves generated by each one spread 
out across the water to collide with the others and create a wave 
representation of where the stones fell and at what speed, weight 
and distance. A waveform interference pattern of a hologram is akin 
to the waveform information in The Field which the five senses 
decode into electrical signals to be decoded by the brain into a 
holographic illusory ‘physical’ reality. In the same way when a laser 
(think human attention) is directed at the waveform interference 
pattern a three-dimensional version of the subject is projected into 
apparently ‘solid’ reality (Fig 16). An amazing trait of holograms 
reveals more ‘paranormal mysteries’. Information of the whole 


hologram is encoded in waveform in every part of the interference 
pattern by the way they are created. This means that every part of a 
hologram is a smaller version of the whole. Cut the interference 
wave-pattern into four and you won't get four parts of the image. 
You get quarter-sized versions of the whole image. The body is a 
hologram and the same applies. Here we have the basis of 
acupuncture, reflexology and other forms of healing which identify 
representations of the whole body in all of the parts, hands, feet, 
ears, everywhere. Skilled palm readers can do what they do because 
the information of whole body is encoded in the hand. The concept 
of as above, so below, comes from this. 
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Figure 15: A waveform interference pattern that holds the information that transforms into a 
hologram. 


Figure 16: Holographic people including ‘Elvis’ holographically inserted to sing a duet with 
Celine Dion. 


The question will be asked of why, if solidity is illusory, we can’t 
just walk through walls and each other. The resistance is not solid 
against solid; it is electromagnetic field against electromagnetic field 
and we decode this into the experience of solid against solid. We 
should also not underestimate the power of belief to dictate reality. 
What you believe is impossible will be. Your belief impacts on your 
decoding processes and they won’t decode what you think is 
impossible. What we believe we perceive and what we perceive we 
experience. ‘Can't dos’ and ‘impossibles’ are like a firewall in a 
computer system that won't put on the screen what the firewall 
blocks. How vital that is to understanding how human experience 
has been hijacked. I explain in The Answer, Everything You Need To 
Know But Have Never Been Told and other books a long list of 
‘mysteries’ and ‘paranormal’ phenomena that are not mysterious 
and perfectly normal once you realise what reality is and how it 
works. ‘Ghosts’ can be seen to pass through ‘solid’ walls because the 
walls are not solid and the ghost is a discarnate entity operating on a 
frequency so different to that of the wall that it’s like two radio 
stations sharing the same space while never interfering with each 
other. I have seen ghosts do this myself. The apartness of people and 
objects is also an illusion. Everything is connected by the Field like 
all sea life is connected by the sea. It’s just that within the limits of 
our visual reality we only ‘see’ holographic information and not the 
field of information that connects everything and from which the 
holographic world is made manifest. If you can only see holographic 
‘objects’ and not the field that connects them they will appear to you 
as unconnected to each other in the same way that we see the 
computer while not seeing the Wi-Fi. 


What you don't know ¢an hurt you 

Okay, we return to those ‘two worlds’ of human society and the Cult 
with its global network of interconnecting secret societies and 
satanic groups which manipulate through governments, 
corporations, media, religions, etc. The fundamental difference 
between them is knowledge. The idea has been to keep humanity 


ignorant of the plan for its total enslavement underpinned by a 
crucial ignorance of reality - who we are and where we are — and 
how we interact with it. ‘Human’ should be the interaction between 
our expanded eternal consciousness and the five-sense body 
experience. We are meant to be in this world in terms of the five 
senses but not of this world in relation to our greater consciousness 
and perspective. In that state we experience the small picture of the 
five senses within the wider context of the big picture of awareness 
beyond the five senses. Put another way the five senses see the dots 
and expanded awareness connects them into pictures and patterns 
that give context to the apparently random and unconnected. 
Without the context of expanded awareness the five senses see only 
apartness and randomness with apparently no meaning. The Cult 
and its other-dimensional controllers seek to intervene in the 
frequency realm where five-sense reality is supposed to connect with 
expanded reality and to keep the two apart (more on this in the final 
chapter). When that happens five-sense mental and emotional 
processes are no longer influenced by expanded awareness, or the 
True ‘I’, and instead are driven by the isolated perceptions of the 
body’s decoding systems. They are in the world and of it. Here we 
have the human plight and why humanity with its potential for 
infinite awareness can be so easily manipulatable and descend into 
such extremes of stupidity. 


Once the Cult isolates five-sense mind from expanded awareness 
it can then program the mind with perceptions and beliefs by 
controlling information that the mind receives through the 
‘education’ system of the formative years and the media perceptual 
bombardment and censorship of an entire lifetime. Limit perception 
and a sense of the possible through limiting knowledge by limiting 
and skewing information while censoring and discrediting that 
which could set people free. As the title of another of my books says 
... And The Truth Shall Set You Free. For this reason the last thing the 
Cult wants in circulation is the truth about anything — especially the 
reality of the eternal ‘I’ — and that’s why it is desperate to control 
information. The Cult knows that information becomes perception 


which becomes behaviour which, collectively, becomes human 
society. Cult-controlled and funded mainstream ‘science’ denies the 
existence of an eternal ‘I’ and seeks to dismiss and trash all evidence 
to the contrary. Cult-controlled mainstream religion has a version of 
‘God’ that is little more than a system of control and dictatorship 
that employs threats of damnation in an afterlife to control 
perceptions and behaviour in the here and now through fear and 
guilt. Neither is true and it’s the ‘neither’ that the Cult wishes to 
suppress. This ‘neither’ is that everything is an expression, a point of 
attention, within an infinite state of consciousness which is the real 
meaning of the term ‘God’. 


Perceptual obsession with the “physical body’ and five-senses 
means that ‘God’ becomes personified as a bearded bloke sitting 
among the clouds or a raging bully who loves us if we do what ‘he’ 
wants and condemns us to the fires of hell if we don’t. These are no 
more than a ‘spiritual’ fairy tales to control and dictate events and 
behaviour through fear of this ‘God’ which has bizarrely made ‘God- 
fearing’ in religious circles a state to be desired. I would suggest that 
fearing anything is not to be encouraged and celebrated, but rather 
deleted. You can see why ‘God fearing’ is so beneficial to the Cult 
and its religions when they decide what ‘God’ wants and what ‘God’ 
demands (the Cult demands) that everyone do. As the great 
American comedian Bill Hicks said satirising a Christian zealot: ‘T 
think what God meant to say.’ How much of this infinite awareness 
(‘God’) that we access is decided by how far we choose to expand 
our perceptions, self-identity and sense of the possible. The scale of 
self-identity reflects itself in the scale of awareness that we can 
connect with and are influenced by — how much knowing and 
insight we have instead of programmed perception. You cannot 
expand your awareness into the infinity of possibility when you 
believe that you are little me Peter the postman or Mary in marketing 
and nothing more. I'll deal with this in the concluding chapter 
because it’s crucial to how we turnaround current events. 


When I realised in the early 1990s there was a Cult network behind 
global events I asked the obvious question: When did it start? I took 
it back to ancient Rome and Egypt and on to Babylon and Sumer in 
Mesopotamia, the ‘Land Between Two Rivers’, in what we now call 
Iraq. The two rivers are the Tigris and Euphrates and this region is of 
immense historical and other importance to the Cult, as is the land 
called Israel only 550 miles away by air. There is much more going 
with deep esoteric meaning across this whole region. It’s not only 
about ‘wars for oil’. Priceless artefacts from Mesopotamia were 
stolen or destroyed after the American and British invasion of Iraq in 
2003 justified by the lies of Boy Bush and Tony Blair (their Cult 
masters) about non-existent “weapons of mass destruction’. 
Mesopotamia was the location of Sumer (about 5,400BC to 1,750BC), 
and Babylon (about 2,350BC to 539BC). Sabbatians may have become 
immensely influential in the Cult in modern times but they are part 
of a network that goes back into the mists of history. Sumer is said by 
historians to be the ‘cradle of civilisation’. I disagree. I say it was the 
re-start of what we call human civilisation after cataclysmic events 
symbolised in part as the ‘Great Flood’ destroyed the world that 
existed before. These fantastic upheavals that I have been describing 
in detail in the books since the early1990s appear in accounts and 
legends of ancient cultures across the world and they are supported 
by geological and biological evidence. Stone tablets found in Iraq 
detailing the Sumer period say the cataclysms were caused by non- 
human ‘gods’ they call the Anunnaki. These are described in terms 
of extraterrestrial visitations in which knowledge supplied by the 
Anunnaki is said to have been the source of at least one of the 
world’s oldest writing systems and developments in astronomy, 
mathematics and architecture that were way ahead of their time. I 
have covered this subject at length in The Biggest Secret and Children 
of the Matrix and the same basic ‘Anunnaki’ story can be found in 
Zulu accounts in South Africa where the late and very great Zulu 
high shaman Credo Mutwa told me that the Sumerian Anunnaki 
were known by Zulus as the Chitauri or ‘children of the serpent’. See 
my six-hour video interview with Credo on this subject entitled The 


Reptilian Agenda recorded at his then home near Johannesburg in 
1999 which you can watch on the Ickonic media platform. 


The Cult emerged out of Sumer, Babylon and Egypt (and 
elsewhere) and established the Roman Empire before expanding 
with the Romans into northern Europe from where many empires 
were savagely imposed in the form of Cult-controlled societies all 
over the world. Mass death and destruction was their calling card. 
The Cult established its centre of operations in Europe and European 
Empires were Cult empires which allowed it to expand into a global 
force. Spanish and Portuguese colonialists headed for Central and 
South America while the British and French targeted North America. 
Africa was colonised by Britain, France, Belgium, the Netherlands, 
Portugal, Spain, Italy, and Germany. Some like Britain and France 
moved in on the Middle East. The British Empire was by far the 
biggest for a simple reason. By now Britain was the headquarters of 
the Cult from which it expanded to form Canada, the United States, 
Australia and New Zealand. The Sun never set on the British Empire 
such was the scale of its occupation. London remains a global centre 
for the Cult along with Rome and the Vatican although others have 
emerged in Israel and China. It is no accident that the ‘virus’ is 
alleged to have come out of China while Italy was chosen as the 
means to terrify the Western population into compliance with 
‘Covid’ fascism. Nor that Israel has led the world in ‘Covid’ fascism 
and mass ‘vaccination’. 

You would think that I would mention the United States here, but 
while it has been an important means of imposing the Cult’s will it is 
less significant than would appear and is currently in the process of 
having what power it does have deleted. The Cult in Europe has 
mostly loaded the guns for the US to fire. America has been 
controlled from Europe from the start through Cult operatives in 
Britain and Europe. The American Revolution was an illusion to 
make it appear that America was governing itself while very 
different forces were pulling the strings in the form of Cult families 
such as the Rothschilds through the Rockefellers and other 
subordinates. The Rockefellers are extremely close to Bill Gates and 


established both scalpel and drug ‘medicine’ and the World Health 
Organization. They play a major role in the development and 
circulation of vaccines through the Rockefeller Foundation on which 
Bill Gates said his Foundation is based. Why wouldn't this be the 
case when the Rockefellers and Gates are on the same team? Cult 
infiltration of human society goes way back into what we call history 
and has been constantly expanding and centralising power with the 
goal of establishing a global structure to dictate everything. Look 
how this has been advanced in great leaps with the ‘Covid’ hoax. 


The non-human dimension 

I researched and observed the comings and goings of Cult operatives 
through the centuries and even thousands of years as they were 
born, worked to promote the agenda within the secret society and 
satanic networks, and then died for others to replace them. Clearly 
there had to be a coordinating force that spanned this entire period 
while operatives who would not have seen the end goal in their 
lifetimes came and went advancing the plan over millennia. I went 
in search of that coordinating force with the usual support from the 
extraordinary synchronicity of my life which has been an almost 
daily experience since 1990. I saw common themes in religious texts 
and ancient cultures about a non-human force manipulating human 
society from the hidden. Christianity calls this force Satan, the Devil 
and demons; Islam refers to the Jinn or Djinn; Zulus have their 
Chitauri (spelt in other ways in different parts of Africa); and the 
Gnostic people in Egypt in the period around and before 400AD 
referred to this phenomena as the ‘Archons’, a word meaning rulers 
in Greek. Central American cultures speak of the ‘Predators’ among 
other names and the same theme is everywhere. I will use ‘Archons’ 
as a collective name for all of them. When you see how their nature 
and behaviour is described all these different sources are clearly 
talking about the same force. Gnostics described the Archons in 
terms of ‘luminous fire’ while Islam relates the Jinn to ‘smokeless 
fire’. Some refer to beings in form that could occasionally be seen, 
but the most common of common theme is that they operate from 


unseen realms which means almost all existence to the visual 
processes of humans. I had concluded that this was indeed the 
foundation of human control and that the Cult was operating within 
the human frequency band on behalf of this hidden force when I 
came across the writings of Gnostics which supported my 
conclusions in the most extraordinary way. 

A sealed earthen jar was found in 1945 near the town of Nag 
Hammadi about 75-80 miles north of Luxor on the banks of the River 
Nile in Egypt. Inside was a treasure trove of manuscripts and texts 
left by the Gnostic people some 1,600 years earlier. They included 13 
leather-bound papyrus codices (manuscripts) and more than 50 texts 
written in Coptic Egyptian estimated to have been hidden in the jar 
in the period of 400AD although the source of the information goes 
back much further. Gnostics oversaw the Great or Royal Library of 
Alexandria, the fantastic depository of ancient texts detailing 
advanced knowledge and accounts of human history. The Library 
was dismantled and destroyed in stages over a long period with the 
death-blow delivered by the Cult-established Roman Church in the 
period around 415AD. The Church of Rome was the Church of 
Babylon relocated as I said earlier. Gnostics were not a race. They 
were a way of perceiving reality. Whenever they established 
themselves and their information circulated the terrorists of the 
Church of Rome would target them for destruction. This happened 
with the Great Library and with the Gnostic Cathars who were 
burned to death by the psychopaths after a long period of 
oppression at the siege of the Castle of Monségur in southern France 
in 1244. The Church has always been terrified of Gnostic information 
which demolishes the official Christian narrative although there is 
much in the Bible that supports the Gnostic view if you read it in 
another way. To anyone studying the texts of what became known as 
the Nag Hammadi Library it is clear that great swathes of Christian 
and Biblical belief has its origin with Gnostics sources going back to 
Sumer. Gnostic themes have been twisted to manipulate the 
perceived reality of Bible believers. Biblical texts have been in the 
open for centuries where they could be changed while Gnostic 


documents found at Nag Hammadi were sealed away and 
untouched for 1,600 years. What you see is what they wrote. 


Use your pneuma not your nous 

Gnosticism and Gnostic come from ‘gnosis’ which means 
knowledge, or rather secret knowledge, in the sense of spiritual 
awareness — knowledge about reality and life itself. The desperation 
of the Cult’s Church of Rome to destroy the Gnostics can be 
understood when the knowledge they were circulating was the last 
thing the Cult wanted the population to know. Sixteen hundred 
years later the same Cult is working hard to undermine and silence 
me for the same reason. The dynamic between knowledge and 
ignorance is a constant. ‘Time’ appears to move on, but essential 
themes remain the same. We are told to ‘use your nous’, a Gnostic 
word for head/brain/intelligence. They said, however, that spiritual 
awakening or ‘salvation’ could only be secured by expanding 
awareness beyond what they called nous and into pneuma or Infinite 
Self. Obviously as I read these texts the parallels with what I have 
been saying since 1990 were fascinating to me. There is a universal 
truth that spans human history and in that case why wouldn't we be 
talking the same language 16 centuries apart? When you free 
yourself from the perception program of the five senses and explore 
expanded realms of consciousness you are going to connect with the 
same information no matter what the perceived ‘era’ within a 
manufactured timeline of a single and tiny range of manipulated 
frequency. Humans working with ‘smart’ technology or knocking 
rocks together in caves is only a timeline appearing to operate within 
the human frequency band. Expanded awareness and the 
knowledge it holds have always been there whether the era be Stone 
Age or computer age. We can only access that knowledge by 
opening ourselves to its frequency which the five-sense prison cell is 
designed to stop us doing. Gates, Fauci, Whitty, Vallance, 
Zuckerberg, Brin, Page, Wojcicki, Bezos, and all the others behind 
the ‘Covid’ hoax clearly have a long wait before their range of 
frequency can make that connection given that an open heart is 


crucial to that as we shall see. Instead of accessing knowledge 
directly through expanded awareness it is given to Cult operatives 
by the secret society networks of the Cult where it has been passed 
on over thousands of years outside the public arena. Expanded 
realms of consciousness is where great artists, composers and 
writers find their inspiration and where truth awaits anyone open 
enough to connect with it. We need to go there fast. 


Archon hijack 

A fifth of the Nag Hammadi texts describe the existence and 
manipulation of the Archons led by a ‘Chief Archon’ they call 
‘Yaldabaoth’, or the ‘Demiurge’, and this is the Christian ‘Devil’, 
‘Satan’, ‘Lucifer’, and his demons. Archons in Biblical symbolism are 
the ‘fallen ones’ which are also referred to as fallen angels after the 
angels expelled from heaven according to the Abrahamic religions of 
Judaism, Christianity and Islam. These angels are claimed to tempt 
humans to ‘sin’ ongoing and you will see how accurate that 
symbolism is during the rest of the book. The theme of ‘original sin’ 
is related to the ‘Fall’ when Adam and Eve were ‘tempted by the 
serpent’ and fell from a state of innocence and ‘obedience’ 
(connection) with God into a state of disobedience (disconnection). 
The Fall is said to have brought sin into the world and corrupted 
everything including human nature. Yaldabaoth, the ‘Lord Archon’, 
is described by Gnostics as a ‘counterfeit spirit’, ‘The Blind One’, 
‘The Blind God’, and ‘The Foolish One’. The Jewish name for 
Yaldabaoth in Talmudic writings is Samael which translates as 
‘Poison of God’, or ‘Blindness of God’. You see the parallels. 
Yaldabaoth in Islamic belief is the Muslim Jinn devil known as 
Shaytan — Shaytan is Satan as the same themes are found all over the 
world in every religion and culture. The ‘Lord God’ of the Old 
Testament is the ‘Lord Archon’ of Gnostic manuscripts and that’s 
why he’s such a bloodthirsty bastard. Satan is known by Christians 
as ‘the Demon of Demons’ and Gnostics called Yaldabaoth the 
‘Archon of Archons’. Both are known as “The Deceiver’. We are 
talking about the same ‘bloke’ for sure and these common themes 


using different names, storylines and symbolism tell a common tale 
of the human plight. 

Archons are referred to in Nag Hammadi documents as mind 
parasites, inverters, guards, gatekeepers, detainers, judges, pitiless 
ones and deceivers. The ‘Covid’ hoax alone is a glaring example of 
all these things. The Biblical ‘God’ is so different in the Old and New 
Testaments because they are not describing the same phenomenon. 
The vindictive, angry, hate-filled, ‘God’ of the Old Testament, known 
as Yahweh, is Yaldabaoth who is depicted in Cult-dictated popular 
culture as the ‘Dark Lord’, ‘Lord of Time’, Lord (Darth) Vader and 
Dormammu, the evil ruler of the ‘Dark Dimension’ trying to take 
over the ‘Earth Dimension’ in the Marvel comic movie, Dr Strange. 
Yaldabaoth is both the Old Testament ‘god’ and the Biblical ‘Satan’. 
Gnostics referred to Yaldabaoth as the ‘Great Architect of the 
Universe’and the Cult-controlled Freemason network calls their god 
‘the ‘Great Architect of the Universe’ (also Grand Architect). The 
‘Great Architect’ Yaldabaoth is symbolised by the Cult as the all- 
seeing eye at the top of the pyramid on the Great Seal of the United 
States and the dollar bill. Archon is encoded in arch-itect as it is in 
arch-angels and arch-bishops. All religions have the theme of a force 
for good and force for evil in some sort of spiritual war and there is a 
reason for that — the theme is true. The Cult and its non-human 
masters are quite happy for this to circulate. They present 
themselves as the force for good fighting evil when they are really 
the force of evil (absence of love). The whole foundation of Cult 
modus operandi is inversion. They promote themselves as a force for 
good and anyone challenging them in pursuit of peace, love, 
fairness, truth and justice is condemned as a satanic force for evil. 
This has been the game plan throughout history whether the Church 
of Rome inquisitions of non-believers or ‘conspiracy theorists’ and 
‘anti-vaxxers’ of today. The technique is the same whatever the 
timeline era. 


Yaldabaoth is revolting (true) 


Yaldabaoth and the Archons are said to have revolted against God 
with Yaldabaoth claiming to be God — the All That Is. The Old 
Testament ‘God’ (Yaldabaoth) demanded to be worshipped as such: ’ 
Iam the LORD, and there is none else, there is no God beside me’ 
(Isaiah 45:5). I have quoted in other books a man who said he was 
the unofficial son of the late Baron Philippe de Rothschild of the 
Mouton-Rothschild wine producing estates in France who died in 
1988 and he told me about the Rothschild ‘revolt from God’. The 
man said he was given the name Phillip Eugene de Rothschild and 
we shared long correspondence many years ago while he was living 
under another identity. He said that he was conceived through 
‘occult incest’ which (within the Cult) was ‘normal and to be 
admired’. ‘Phillip’ told me about his experience attending satanic 
rituals with rich and famous people whom he names and you can 
see them and the wider background to Cult Satanism in my other 
books starting with The Biggest Secret. Cult rituals are interactions 
with Archontic ‘gods’. ‘Phillip’ described Baron Philippe de 
Rothschild as ‘a master Satanist and hater of God’ and he used the 
same term ‘revolt from God’ associated with 
Yaldabaoth/Satan/Lucifer/the Devil in describing the Sabbatian 
Rothschild dynasty. ‘I played a key role in my family’s revolt from 
God’, he said. That role was to infiltrate in classic Sabbatian style the 
Christian Church, but eventually he escaped the mind-prison to live 
another life. The Cult has been targeting religion in a plan to make 
worship of the Archons the global one-world religion. Infiltration of 
Satanism into modern ‘culture’, especially among the young, 
through music videos, stage shows and other means, is all part of 
this. 


Nag Hammadi texts describe Yaldabaoth and the Archons in their 
prime form as energy — consciousness — and say they can take form if 
they choose in the same way that consciousness takes form as a 
human. Yaldabaoth is called ‘formless’ and represents a deeply 
inverted, distorted and chaotic state of consciousness which seeks to 
attached to humans and turn them into a likeness of itself in an 
attempt at assimilation. For that to happen it has to manipulate 


humans into low frequency mental and emotional states that match 
its own. Archons can certainly appear in human form and this is the 
origin of the psychopathic personality. The energetic distortion 
Gnostics called Yaldabaoth is psychopathy. When psychopathic 
Archons take human form that human will be a psychopath as an 
expression of Yaldabaoth consciousness. Cult psychopaths are 
Archons in human form. The principle is the same as that portrayed 
in the 2009 Avatar movie when the American military travelled to a 
fictional Earth-like moon called Pandora in the Alpha Centauri star 
system to infiltrate a society of blue people, or Na’vi, by hiding 
within bodies that looked like the Na’vi. Archons posing as humans 
have a particular hybrid information field, part human, part Archon, 
(the ancient ‘demigods’) which processes information in a way that 
manifests behaviour to match their psychopathic evil, lack of 
empathy and compassion, and stops them being influenced by the 
empathy, compassion and love that a fully-human information field 
is capable of expressing. Cult bloodlines interbreed, be they royalty 
or dark suits, for this reason and you have their obsession with 
incest. Interbreeding with full-blown humans would dilute the 
Archontic energy field that guarantees psychopathy in its 
representatives in the human realm. 

Gnostic writings say the main non-human forms that Archons 
take are serpentine (what I have called for decades ‘reptilian’ amid 
unbounded ridicule from the Archontically-programmed) and what 
Gnostics describe as ‘an unborn baby or foetus with grey skin and 
dark, unmoving eyes’. This is an excellent representation of the ET 
‘Greys’ of UFO folklore which large numbers of people claim to have 
seen and been abducted by — Zulu shaman Credo Mutwa among 
them. I agree with those that believe in extraterrestrial or 
interdimensional visitations today and for thousands of years past. 
No wonder with their advanced knowledge and technological 
capability they were perceived and worshipped as gods for 
technological and other ‘miracles’ they appeared to perform. 
Imagine someone arriving in a culture disconnected from the 
modern world with a smartphone and computer. They would be 


seen as a ‘god’ capable of ‘miracles’. The Renegade Mind, however, 
wants to know the source of everything and not only the way that 
source manifests as human or non-human. In the same way that a 
Renegade Mind seeks the original source material for the “‘Covid 
virus’ to see if what is claimed is true. The original source of 
Archons in form is consciousness — the distorted state of 
consciousness known to Gnostics as Yaldabaoth. 


‘Revolt from God is energetic disconnection 

Where I am going next will make a lot of sense of religious texts and 
ancient legends relating to ‘Satan’, Lucifer’ and the ‘gods’. Gnostic 
descriptions sync perfectly with the themes of my own research over 
the years in how they describe a consciousness distortion seeking to 
impose itself on human consciousness. I’ve referred to the core of 
infinite awareness in previous books as Infinite Awareness in 
Awareness of Itself. By that I mean a level of awareness that knows 
that it is all awareness and is aware of all awareness. From here 
comes the frequency of love in its true sense and balance which is 
what love is on one level — the balance of all forces into a single 
whole called Oneness and Isness. The more we disconnect from this 
state of love that many call ‘God’ the constituent parts of that 
Oneness start to unravel and express themselves as a part and not a 
whole. They become individualised as intellect, mind, selfishness, 
hatred, envy, desire for power over others, and such like. This is not 
a problem in the greater scheme in that ‘God’, the All That Is, can 
experience all these possibilities through different expressions of 
itself including humans. What we as expressions of the whole 
experience the All That Is experiences. We are the All That Is 
experiencing itself. As we withdraw from that state of Oneness we 
disconnect from its influence and things can get very unpleasant and 
very stupid. Archontic consciousness is at the extreme end of that. It 
has so disconnected from the influence of Oneness that it has become 
an inversion of unity and love, an inversion of everything, an 
inversion of life itself. Evil is appropriately live written backwards. 
Archontic consciousness is obsessed with death, an inversion of life, 


and so its manifestations in Satanism are obsessed with death. They 
use inverted symbols in their rituals such as the inverted pentagram 
and cross. Sabbatians as Archontic consciousness incarnate invert 
Judaism and every other religion and culture they infiltrate. They 
seek disunity and chaos and they fear unity and harmony as they 
fear love like garlic to a vampire. As a result the Cult, Archons 
incarnate, act with such evil, psychopathy and lack of empathy and 
compassion disconnected as they are from the source of love. How 
could Bill Gates and the rest of the Archontic psychopaths do what 
they have to human society in the ‘Covid’ era with all the death, 
suffering and destruction involved and have no emotional 
consequence for the impact on others? Now you know. Why have 
Zuckerberg, Brin, Page, Wojcicki and company callously censored 
information warning about the dangers of the ‘vaccine’ while 
thousands have been dying and having severe, sometimes life- 
changing reactions? Now you know. Why have Tedros, Fauci, 
Whitty, Vallance and their like around the world been using case and 
death figures they’re aware are fraudulent to justify lockdowns and 
all the deaths and destroyed lives that have come from that? Now 
you know. Why did Christian Drosten produce and promote a 
‘testing’ protocol that he knew couldn’t test for infectious disease 
which led to a global human catastrophe. Now you know. The 
Archontic mind doesn’t give a shit (Fig 17). I personally think that 
Gates and major Cult insiders are a form of AI cyborg that the 
Archons want humans to become. 
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Figure 17: Artist Neil Hague’s version of the ‘Covid’ hierarchy. 


Human batteries 

A state of such inversion does have its consequences, however. The 
level of disconnection from the Source of All means that you 
withdraw from that source of energetic sustenance and creativity. 
This means that you have to find your own supply of energetic 
power and it has — us. When the Morpheus character in the first 
Matrix movie held up a battery he spoke a profound truth when he 
said: ‘The Matrix is a computer-generated dream world built to keep 
us under control in order to change the human being into one of 


these.’ The statement was true in all respects. We do live in a 
technologically-generated virtual reality simulation (more very 
shortly) and we have been manipulated to be an energy source for 
Archontic consciousness. The Disney-Pixar animated movie 
Monsters, Inc. in 2001 symbolised the dynamic when monsters in 
their world had no energy source and they would enter the human 
world to terrify children in their beds, catch the child’s scream, terror 
(low-vibrational frequencies), and take that energy back to power 
the monster world. The lead character you might remember was a 
single giant eye and the symbolism of the Cult’s all-seeing eye was 
obvious. Every thought and emotion is broadcast as a frequency 
unique to that thought and emotion. Feelings of love and joy, 
empathy and compassion, are high, quick, frequencies while fear, 
depression, anxiety, suffering and hate are low, slow, dense 
frequencies. Which kind do you think Archontic consciousness can 
connect with and absorb? In such a low and dense frequency state 
there’s no way it can connect with the energy of love and joy. 
Archons can only feed off energy compatible with their own 
frequency and they and their Cult agents want to delete the human 
world of love and joy and manipulate the transmission of low 
vibrational frequencies through low-vibrational human mental and 
emotional states. We are their energy source. Wars are energetic 
banquets to the Archons — a world war even more so — and think 
how much low-frequency mental and emotional energy has been 
generated from the consequences for humanity of the ‘Covid’ hoax 
orchestrated by Archons incarnate like Gates. 


The ancient practice of human sacrifice ‘to the gods’, continued in 
secret today by the Cult, is based on the same principle. “The gods’ 
are Archontic consciousness in different forms and the sacrifice is 
induced into a state of intense terror to generate the energy the 
Archontic frequency can absorb. Incarnate Archons in the ritual 
drink the blood which contains an adrenaline they crave which 
floods into the bloodstream when people are terrorised. Most of the 
sacrifices, ancient and modern, are children and the theme of 
‘sacrificing young virgins to the gods’ is just code for children. They 


have a particular pre-puberty energy that Archons want more than 
anything and the energy of the young in general is their target. The 
California Department of Education wants students to chant the 
names of Aztec gods (Archontic gods) once worshipped in human 
sacrifice rituals in a curriculum designed to encourage them to 
‘challenge racist, bigoted, discriminatory, imperialist/colonial 
beliefs’, join ‘social movements that struggle for social justice’, and 
‘build new possibilities for a post-racist, post-systemic racism 
society’. It’s the usual Woke crap that inverts racism and calls it anti- 
racism. In this case solidarity with ‘indigenous tribes’ is being used 
as an excuse to chant the names of ‘gods’ to which people were 
sacrificed (and still are in secret). What an example of Woke’s 
inability to see beyond black and white, us and them, They condemn 
the colonisation of these tribal cultures by Europeans (quite right), 
but those cultures sacrificing people including children to their 
‘gods’, and mass murdering untold numbers as the Aztecs did, is 
just fine. One chant is to the Aztec god Tezcatlipoca who had a man 
sacrificed to him in the 5th month of the Aztec calendar. His heart 
was cut out and he was eaten. Oh, that’s okay then. Come on 
children ... after three ... Other sacrificial ‘gods’ for the young to 
chant their allegiance include Quetzalcoatl, Huitzilopochtli and Xipe 
Totec. The curriculum says that ‘chants, affirmations, and energizers 
can be used to bring the class together, build unity around ethnic 
studies principles and values, and to reinvigorate the class following 
a lesson that may be emotionally taxing or even when student 
engagement may appear to be low’. Well, that’s the cover story, 
anyway. Chanting and mantras are the repetition of a particular 
frequency generated from the vocal cords and chanting the names of 
these Archontic ‘gods’ tunes you into their frequency. That is the last 
thing you want when it allows for energetic synchronisation, 
attachment and perceptual influence. Initiates chant the names of 
their ‘Gods’ in their rituals for this very reason. 


Paedophilia is another way that Archons absorb the energy of 
children. Paedophiles possessed by Archontic consciousness are 
used as the conduit during sexual abuse for discarnate Archons to 
vampire the energy of the young they desire so much. Stupendous 
numbers of children disappear every year never to be seen again 
although you would never know from the media. Imagine how 
much low-vibrational energy has been generated by children during 
the ‘Covid’ hoax when so many have become depressed and 
psychologically destroyed to the point of killing themselves. 
Shocking numbers of children are now taken by the state from 
loving parents to be handed to others. I can tell you from long 
experience of researching this since 1996 that many end up with 
paedophiles and assets of the Cult through corrupt and Cult-owned 
social services which in the reframing era has hired many 
psychopaths and emotionless automatons to do the job. Children are 
even stolen to order using spurious reasons to take them by the 
corrupt and secret (because they’re corrupt) ‘family courts’. I have 
written in detail in other books, starting with The Biggest Secret in 
1997, about the ubiquitous connections between the political, 
corporate, government, intelligence and military elites (Cult 
operatives) and Satanism and paedophilia. If you go deep enough 
both networks have an interlocking leadership. The Woke mentality 
has been developed by the Cult for many reasons: To promote 
almost every aspect of its agenda; to hijack the traditional political 
left and turn it fascist; to divide and rule; and to target agenda 
pushbackers. But there are other reasons which relate to what Iam 
describing here. How many happy and joyful Wokers do you ever 
see especially at the extreme end? They are a mental and 
psychological mess consumed by emotional stress and constantly 
emotionally cocked for the next explosion of indignation at someone 
referring to a female as a female. They are walking, talking, batteries 
as Morpheus might say emitting frequencies which both enslave 
them in low-vibrational bubbles of perceptual limitation and feed 
the Archons. Add to this the hatred claimed to be love; fascism 
claimed to ‘anti-fascism’, racism claimed to be ‘anti-racism’; 


exclusion claimed to inclusion; and the abuse-filled Internet trolling. 
You have a purpose-built Archontic energy system with not a wind 
turbine in sight and all founded on Archontic inversion. We have 
whole generations now manipulated to serve the Archons with their 
actions and energy. They will be doing so their entire adult lives 
unless they snap out of their Archon-induced trance. Is it really a 
surprise that Cult billionaires and corporations put so much money 
their way? Where is the energy of joy and laughter, including 
laughing at yourself which is confirmation of your own emotional 
security? Mark Twain said: ‘The human race has one really effective 
weapon, and that is laughter.’ We must use it all the time. Woke has 
destroyed comedy because it has no humour, no joy, sense of irony, 
or self-deprecation. Its energy is dense and intense. Mmmmm, lunch 
says the Archontic frequency. Rudolf Steiner (1861-1925) was the 
Austrian philosopher and famous esoteric thinker who established 
Waldorf education or Steiner schools to treat children like unique 
expressions of consciousness and not minds to be programmed with 
the perceptions determined by authority. I’d been writing about this 
energy vampiring for decades when I was sent in 2016 a quote by 
Steiner. He was spot on: 


There are beings in the spiritual realms for whom anxiety and fear emanating from human 
beings offer welcome food. When humans have no anxiety and fear, then these creatures 
starve. If fear and anxiety radiates from people and they break out in panic, then these 
creatures find welcome nutrition and they become more and more powerful. These beings are 
hostile towards humanity. Everything that feeds on negative feelings, on anxiety, fear and 
superstition, despair or doubt, are in reality hostile forces in super-sensible worlds, launching 
cruel attacks on human beings, while they are being fed ... These are exactly the feelings that 
belong to contemporary culture and materialism; because it estranges people from the 
spiritual world, it is especially suited to evoke hopelessness and fear of the unknown in 
people, thereby calling up the above mentioned hostile forces against them. 


Pause for a moment from this perspective and reflect on what has 
happened in the world since the start of 2020. Not only will pennies 
drop, but billion dollar bills. We see the same theme from Don Juan 
Matus, a Yaqui Indian shaman in Mexico and the information source 
for Peruvian-born writer, Carlos Castaneda, who wrote a series of 


books from the 1960s to 1990s. Don Juan described the force 
manipulating human society and his name for the Archons was the 
predator: 


We have a predator that came from the depths of the cosmos and took over the rule of our 
lives. Human beings are its prisoners. The predator is our lord and master. It has rendered us 
docile, helpless. If we want to protest, it suppresses our protest. If we want to act 
independently, it demands that we don’t do so ... indeed we are held prisoner! 


They took us over because we are food to them, and they squeeze us mercilessly because we 
are their sustenance. Just as we rear chickens in coops, the predators rear us in human coops, 
humaneros. Therefore, their food is always available to them. 


Different cultures, different eras, same recurring theme. 


The ‘ennoia’ dilemma 


Nag Hammadi Gnostic manuscripts say that Archon consciousness 
has no ‘ennoia’. This is directly translated as ‘intentionality’, but I’ll 
use the term ‘creative imagination’. The All That Is in awareness of 
itself is the source of all creativity — all possibility - and the more 
disconnected you are from that source the more you are 
subsequently denied ‘creative imagination’. Given that Archon 
consciousness is almost entirely disconnected it severely lacks 
creativity and has to rely on far more mechanical processes of 
thought and exploit the creative potential of those that do have 
‘ennoia’. You can see cases of this throughout human society. Archon 
consciousness almost entirely dominates the global banking system 
and if we study how that system works you will appreciate what I 
mean. Banks manifest ‘money’ out of nothing by issuing lines of 
‘credit’ which is ‘money’ that has never, does not, and will never 
exist except in theory. It’s a confidence trick. If you think ‘credit’ 
figures-on-a-screen ‘money’ is worth anything you accept it as 
payment. If you don’t then the whole system collapses through lack 
of confidence in the value of that ‘money’. Archontic bankers with 
no ‘ennoia’ are ‘lending’ ‘money’ that doesn’t exist to humans that do 
have creativity — those that have the inspired ideas and create 
businesses and products. Archon banking feeds off human creativity 


which it controls through ‘money’ creation and debt. Humans have 
the creativity and Archons exploit that for their own benefit and 
control while having none themselves. Archon Internet platforms 
like Facebook claim joint copyright of everything that creative users 
post and while Archontic minds like Zuckerberg may officially head 
that company it will be human creatives on the staff that provide the 
creative inspiration. When you have limitless ‘money’ you can then 
buy other companies established by creative humans. Witness the 
acquisition record of Facebook, Google and their like. Survey the 
Archon-controlled music industry and you see non-creative dark 
suit executives making their fortune from the human creativity of 
their artists. The cases are endless. Research the history of people 
like Gates and Zuckerberg and how their empires were built on 
exploiting the creativity of others. Archon minds cannot create out of 
nothing, but they are skilled (because they have to be) in what 
Gnostic texts call ‘countermimicry’. They can imitate, but not 
innovate. Sabbatians trawl the creativity of others through 
backdoors they install in computer systems through their 
cybersecurity systems. Archon-controlled China is globally infamous 
for stealing intellectual property and I remember how Hong Kong, 
now part of China, became notorious for making counterfeit copies 
of the creativity of others — ‘countermimicry’. With the now 
pervasive and all-seeing surveillance systems able to infiltrate any 
computer you can appreciate the potential for Archons to vampire 
the creativity of humans. Author John Lamb Lash wrote in his book 
about the Nag Hammadi texts, Not In His Image: 


Although they cannot originate anything, because they lack the divine factor of ennoia 
(intentionality), Archons can imitate with a vengeance. Their expertise is simulation (HAL, 
virtual reality). The Demiurge [Yaldabaoth] fashions a heaven world copied from the fractal 
patterns [of the original] ... His construction is celestial kitsch, like the fake Italianate villa of a 
Mafia don complete with militant angels to guard every portal. 


This brings us to something that I have been speaking about since 
the turn of the millennium. Our reality is a simulation; a virtual 
reality that we think is real. No, I’m not kidding. 


Human reality? Well, virtually 

I had pondered for years about whether our reality is ‘real’ or some 
kind of construct. I remembered being immensely affected on a visit 
as a small child in the late 1950s to the then newly-opened 
Planetarium on the Marylebone Road in London which is now 
closed and part of the adjacent Madame Tussauds wax museum. It 
was in the middle of the day, but when the lights went out there was 
the night sky projected in the Planetarium’s domed ceiling and it 
appeared to be so real. The experience never left me and I didn’t 
know why until around the turn of the millennium when I became 
certain that our ‘night sky’ and entire reality is a projection, a virtual 
reality, akin to the illusory world portrayed in the Matrix movies. I 
looked at the sky one day in this period and it appeared to me like 
the domed roof of the Planetarium. The release of the first Matrix 
movie in 1999 also provided a synchronistic and perfect visual 
representation of where my mind had been going for a long time. I 
hadn’t come across the Gnostic Nag Hammadi texts then. When I 
did years later the correlation was once again astounding. As I read 
Gnostic accounts from 1,600 years and more earlier it was clear that 
they were describing the same simulation phenomenon. They tell 
how the Yaldabaoth ‘Demiurge’ and Archons created a “bad copy’ of 
original reality to rule over all that were captured by its illusions and 
the body was a prison to trap consciousness in the ‘bad copy’ fake 
reality. Read how Gnostics describe the ‘bad copy’ and update that 
to current times and they are referring to what we would call today a 
virtual reality simulation. 

Author John Lamb Lash said ‘the Demiurge fashions a heaven 
world copied from the fractal patterns’ of the original through 
expertise in ‘HAL’ or virtual reality simulation. Fractal patterns are 
part of the energetic information construct of our reality, a sort of 
blueprint. If these patterns were copied in computer terms it would 
indeed give you a copy of a ‘natural’ reality in a non-natural 
frequency and digital form. The principle is the same as making a 
copy of a website. The original website still exists, but now you can 
change the copy version to make it whatever you like and it can 


become very different to the original website. Archons have done 
this with our reality, a synthetic copy of prime reality that still exists 
beyond the frequency walls of the simulation. Trapped within the 
illusions of this synthetic Matrix, however, were and are human 
consciousness and other expressions of prime reality and this is why 
the Archons via the Cult are seeking to make the human body 
synthetic and give us synthetic AI minds to complete the job of 
turning the entire reality synthetic including what we perceive to be 
the natural world. To quote Kurzweil: ‘Nanobots will infuse all the 
matter around us with information. Rocks, trees, everything will 
become these intelligent creatures.’ Yes, synthetic ‘creatures’ just as 
‘Covid’ and other genetically-manipulating ‘vaccines’ are designed 
to make the human body synthetic. From this perspective it is 
obvious why Archons and their Cult are so desperate to infuse 
synthetic material into every human with their ‘Covid’ scam. 


Let there be (electromagnetic) light 

Yaldabaoth, the force that created the simulation, or Matrix, makes 
sense of the Gnostic reference to ‘The Great Architect’ and its use by 
Cult Freemasonry as the name of its deity. The designer of the Matrix 
in the movies is called ‘The Architect’ and that trilogy is jam-packed 
with symbolism relating to these subjects. I have contended for years 
that the angry Old Testament God (Yaldabaoth) is the ‘God’ being 
symbolically ‘quoted’ in the opening of Genesis as ‘creating the 
world’. This is not the creation of prime reality — it’s the creation of 
the simulation. The Genesis ‘God’ says: ‘Let there be Light: and there 
was light.’ But what is this ‘Light’? I have said for decades that the 
speed of light (186,000 miles per second) is not the fastest speed 
possible as claimed by mainstream science and is in fact the 
frequency walls or outer limits of the Matrix. You can’t have a fastest 
or slowest anything within all possibility when everything is 
possible. The human body is encoded to operate within the speed of 
light or within the simulation and thus we see only the tiny frequency 
band of visible light. Near-death experiencers who perceive reality 
outside the body during temporary ‘death’ describe a very different 


form of light and this is supported by the Nag Hammadi texts. 
Prime reality beyond the simulation (‘Upper Aeons’ to the Gnostics) 
is described as a realm of incredible beauty, bliss, love and harmony 
—a realm of ‘watery light’ that is so powerful ‘there are no shadows’. 
Our false reality of Archon control, which Gnostics call the ‘Lower 
Aeons’, is depicted as a realm with a different kind of ‘light’ and 
described in terms of chaos, ‘Hell’, ‘the Abyss’ and ‘Outer Darkness’, 
where trapped souls are tormented and manipulated by demons 
(relate that to the ‘Covid’ hoax alone). The watery light theme can be 
found in near-death accounts and it is not the same as simulation 
‘light’ which is electromagnetic or radiation light within the speed of 
light — the ‘Lower Aeons’. Simulation ‘light’ is the ‘Iuminous fire’ 
associated by Gnostics with the Archons. The Bible refers to 
Yaldabaoth as ‘that old serpent, called the Devil, and Satan, which 
deceiveth the whole world’ (Revelation 12:9). I think that making a 
simulated copy of prime reality (‘countermimicry’) and changing it 
dramatically while all the time manipulating humanity to believe it 
to be real could probably meet the criteria of deceiving the whole 
world. Then we come to the Cult god Lucifer — the Light Bringer. 
Lucifer is symbolic of Yaldabaoth, the bringer of radiation light that 
forms the bad copy simulation within the speed of light. “He’ is 
symbolised by the lighted torch held by the Statue of Liberty and in 
the name ‘Illuminati’. Sabbatian-Frankism declares that Lucifer is the 
true god and Lucifer is the real god of Freemasonry honoured as 
their ‘Great or Grand Architect of the Universe’ (simulation). 


I would emphasise, too, the way Archontic technologically- 
generated luminous fire of radiation has deluged our environment 
since I was a kid in the 1950s and changed the nature of The Field 
with which we constantly interact. Through that interaction 
technological radiation is changing us. The Smart Grid is designed to 
operate with immense levels of communication power with 5G 
expanding across the world and 6G, 7G, in the process of 
development. Radiation is the simulation and the Archontic 
manipulation system. Why wouldn’t the Archon Cult wish to 
unleash radiation upon us to an ever-greater extreme to form 


Kurzweil’s ‘cloud’? The plan for a synthetic human is related to the 
need to cope with levels of radiation beyond even anything we’ve 
seen so far. Biological humans would not survive the scale of 
radiation they have in their script. The Smart Grid is a technological 
sub-reality within the technological simulation to further disconnect 
five-sense perception from expanded consciousness. It’s a 
technological prison of the mind. 


A recurring theme in religion and native cultures is the 
manipulation of human genetics by a non-human force and most 
famously recorded as the biblical “sons of god’ (the gods plural in the 
original) who interbred with the daughters of men. The Nag 
Hammadi Apocryphon of John tells the same story this way: 


He [Yaldabaoth] sent his angels [Archons/demons] to the daughters of men, that they might 
take some of them for themselves and raise offspring for their enjoyment. And at first they did 
not succeed. When they had no success, they gathered together again and they made a plan 
together ... And the angels changed themselves in their likeness into the likeness of their 
mates, filling them with the spirit of darkness, which they had mixed for them, and with evil ... 
And they took women and begot children out of the darkness according to the likeness of 
their spirit. 


Possession when a discarnate entity takes over a human body is an 
age-old theme and continues today. It’s very real and I’ve seen it. 
Satanic and secret society rituals can create an energetic environment 
in which entities can attach to initiates and I’ve heard many stories 
of how people have changed their personality after being initiated 
even into lower levels of the Freemasons. I have been inside three 
Freemasonic temples, one at a public open day and two by just 
walking in when there was no one around to stop me. They were in 
Ryde, the town where I live, Birmingham, England, when I was with 
a group, and Boston, Massachusetts. They all felt the same 
energetically — dark, dense, low-vibrational and sinister. Demonic 
attachment can happen while the initiate has no idea what is going 
on. To them it’s just a ritual to get in the Masons and do a bit of good 


business. In the far more extreme rituals of Satanism human 
possession is even more powerful and they are designed to make 
possession possible. The hierarchy of the Cult is dictated by the 
power and perceived status of the possessing Archon. In this way 
the Archon hierarchy becomes the Cult hierarchy. Once the entity 
has attached it can influence perception and behaviour and if it 
attaches to the extreme then so much of its energy (information) 
infuses into the body information field that the hologram starts to 
reflect the nature of the possessing entity. This is the Exorcist movie 
type of possession when facial features change and it’s known as 
shapeshifting. Islam’s Jinn are said to be invisible tricksters who 
change shape, ‘whisper’, confuse and take human form. These are all 
traits of the Archons and other versions of the same phenomenon. 
Extreme possession could certainty infuse the ‘spirit of darkness’ 
into a partner during sex as the Nag Hammadi texts appear to 
describe. Such an infusion can change genetics which is also 
energetic information. Human genetics is information and the ‘spirit 
of darkness’ is information. Mix one with the other and change must 
happen. Islam has the concept of a ‘Jinn baby’ through possession of 
the mother and by Jinn taking human form. There are many ways 
that human genetics can be changed and remember that Archons 
have been aware all along of advanced techniques to do this. What is 
being done in human society today — and far more — was known 
about by Archons at the time of the ‘fallen ones’ and their other 
versions described in religions and cultures. 


Archons and their human-world Cult are obsessed with genetics 
as we see today and they know this dictates how information is 
processed into perceived reality during a human life. They needed to 
produce a human form that would decode the simulation and this is 
symbolically known as ‘Adam and Eve’ who left the ‘garden’ (prime 
reality) and ‘fell’ into Matrix reality. The simulation is not a 
‘physical’ construct (there is no “physical’); it is a source of 
information. Think Wi-Fi again. The simulation is an energetic field 
encoded with information and body-brain systems are designed to 
decode that information encoded in wave or frequency form which 


is transmitted to the brain as electrical signals. These are decoded by 
the brain to construct our sense of reality — an illusory ‘physical’ 
world that only exists in the brain or the mind. Virtual reality games 
mimic this process using the same sensory decoding system. 
Information is fed to the senses to decode a virtual reality that can 
appear so real, but isn’t (Figs 18 and 19). Some scientists believe — 
and I agree with them — that what we perceive as ‘physical’ reality 
only exists when we are looking or observing. The act of perception 
or focus triggers the decoding systems which turn waveform 
information into holographic reality. When we are not observing 
something our reality reverts from a holographic state to a waveform 
state. This relates to the same principle as a falling tree not making a 
noise unless someone is there to hear it or decode it. The concept 
makes sense from the simulation perspective. A computer is not 
decoding all the information in a Wi-Fi field all the time and only 
decodes or brings into reality on the screen that part of Wi-Fi that it’s 
decoding — focusing upon — at that moment. 


Figure 19: The result can be experienced as very ‘real’. 


Interestingly, Professor Donald Hoffman at the Department of 
Cognitive Sciences at the University of California, Irvine, says that 
our experienced reality is like a computer interface that shows us 
only the level with which we interact while hiding all that exists 
beyond it: ‘Evolution shaped us with a user interface that hides the 
truth. Nothing that we see is the truth — the very language of space 
and time and objects is the wrong language to describe reality.’ He is 
correct in what he says on so many levels. Space and time are not a 
universal reality. They are a phenomenon of decoded simulation 
reality as part of the process of enslaving our sense of reality. Near- 
death experiencers report again and again how space and time did 
not exist as we perceive them once they were free of the body — body 
decoding systems. You can appreciate from this why Archons and 
their Cult are so desperate to entrap human attention in the five 
senses where we are in the Matrix and of the Matrix. Opening your 
mind to expanded states of awareness takes you beyond the 
information confines of the simulation and you become aware of 
knowledge and insights denied to you before. This is what we call 
‘awakening’ — awakening from the Matrix — and in the final chapter I 
will relate this to current events. 


Where are the ‘aliens’? 

A simulation would explain the so-called ‘Fermi Paradox’ named 
after Italian physicist Enrico Fermi (1901-1954) who created the first 
nuclear reactor. He considered the question of why there is such a 
lack of extraterrestrial activity when there are so many stars and 
planets in an apparently vast universe; but what if the night sky that 
we see, or think we do, is a simulated projection as I say? If you 
control the simulation and your aim is to hold humanity fast in 
essential ignorance would you want other forms of life including 
advanced life coming and going sharing information with 
humanity? Or would you want them to believe they were isolated 
and apparently alone? Themes of human isolation and apartness are 
common whether they be the perception of a lifeless universe or the 
fascist isolation laws of the ‘Covid’ era. Paradoxically the very 


existence of a simulation means that we are not alone when some 
force had to construct it. My view is that experiences that people 
have reported all over the world for centuries with Reptilians and 
Grey entities are Archon phenomena as Nag Hammadi texts 
describe; and that benevolent ‘alien’ interactions are non-human 
groups that come in and out of the simulation by overcoming 
Archon attempts to keep them out. It should be highlighted, too, that 
Reptilians and Greys are obsessed with genetics and technology as 
related by cultural accounts and those who say they have been 
abducted by them. Technology is their way of overcoming some of 
the limitations in their creative potential and our technology-driven 
and controlled human society of today is archetypical Archon- 
Reptilian-Grey modus operandi. Technocracy is really Archontocracy. 
The Universe does not have to be as big as it appears with a 
simulation. There is no space or distance only information decoded 
into holographic reality. What we call ‘space’ is only the absence of 
holographic ‘objects’ and that ‘space’ is The Field of energetic 
information which connects everything into a single whole. The 
same applies with the artificially-generated information field of the 
simulation. The Universe is not big or small as a physical reality. It is 
decoded information, that’s all, and its perceived size is decided by 
the way the simulation is encoded to make it appear. The entire 
night sky as we perceive it only exists in our brain and so where are 
those ‘millions of light years’? The ‘stars’ on the ceiling of the 
Planetarium looked a vast distance away. 


There’s another point to mention about ‘aliens’. I have been 
highlighting since the 1990s the plan to stage a fake ‘alien invasion’ 
to justify the centralisation of global power and a world military. 
Nazi scientist Werner von Braun, who was taken to America by 
Operation Paperclip after World War Two to help found NASA, told 
his American assistant Dr Carol Rosin about the Cult agenda when 
he knew he was dying in 1977. Rosin said that he told her about a 
sequence that would lead to total human control by a one-world 
government. This included threats from terrorism, rogue nations, 
meteors and asteroids before finally an ‘alien invasion’. All of these 


things, von Braun said, would be bogus and what I would refer to as 
a No-Problem-Reaction-Solution. Keep this in mind when ‘the aliens 
are coming’ is the new mantra. The aliens are not coming — they are 
already here and they have infiltrated human society while looking 
human. French-Canadian investigative journalist Serge Monast said 
in 1994 that he had uncovered a NASA/military operation called 
Project Blue Beam which fits with what Werner von Braun predicted. 
Monast died of a ‘heart attack’ in 1996 the day after he was arrested 
and spent a night in prison. He was 51. He said Blue Beam was a 
plan to stage an alien invasion that would include religious figures 
beamed holographically into the sky as part of a global manipulation 
to usher in a ‘new age’ of worshipping what I would say is the Cult 
‘god’ Yaldabaoth in a one-world religion. Fake holographic asteroids 
are also said to be part of the plan which again syncs with von 
Braun. How could you stage an illusory threat from asteroids unless 
they were holographic inserts? This is pretty straightforward given 
the advanced technology outside the public arena and the fact that 
our ‘physical’ reality is holographic anyway. Information fields 
would be projected and we would decode them into the illusion of a 
‘physical’ asteroid. If they can sell a global ‘pandemic’ with a ‘virus’ 
that doesn’t exist what will humans not believe if government and 
media tell them? 

All this is particularly relevant as I write with the Pentagon 
planning to release in June, 2021, information about ‘UFO sightings’. 
I have been following the UFO story since the early 1990s and the 
common theme throughout has been government and military 
denials and cover up. More recently, however, the Pentagon has 
suddenly become more talkative and apparently open with Air 
Force pilot radar images released of unexplained craft moving and 
changing direction at speeds well beyond anything believed possible 
with human technology. Then, in March, 2021, former Director of 
National Intelligence John Ratcliffe said a Pentagon report months 
later in June would reveal a great deal of information about UFO 
sightings unknown to the public. He said the report would have 
‘massive implications’. The order to do this was included bizarrely 


in a $2.3 trillion ‘coronavirus’ relief and government funding bill 
passed by the Trump administration at the end of 2020. I would add 
some serious notes of caution here. I have been pointing out since 
the 1990s that the US military and intelligence networks have long 
had craft — ‘flying saucers’ or anti-gravity craft — which any observer 
would take to be extraterrestrial in origin. Keeping this knowledge 
from the public allows craft flown by humans to be perceived as alien 
visitations. I am not saying that ‘aliens’ do not exist. I would be the 
last one to say that, but we have to be streetwise here. President 
Ronald Reagan told the UN General Assembly in 1987: ‘I 
occasionally think how quickly our differences worldwide would 
vanish if we were facing an alien threat from outside this world.’ 
That's the idea. Unite against a common ‘enemy’ with a common 
purpose behind your ‘saviour force’ (the Cult) as this age-old 
technique of mass manipulation goes global. 


Science moves this way... 

I could find only one other person who was discussing the 
simulation hypothesis publicly when I concluded it was real. This 
was Nick Bostrom, a Swedish-born philosopher at the University of 
Oxford, who has explored for many years the possibility that human 
reality is a computer simulation although his version and mine are 
not the same. Today the simulation and holographic reality 
hypothesis have increasingly entered the scientific mainstream. Well, 
the more open-minded mainstream, that is. Here are a few of the 
ever-gathering examples. American nuclear physicist Silas Beane led 
a team of physicists at the University of Bonn in Germany pursuing 
the question of whether we live in a simulation. They concluded that 
we probably do and it was likely based on a lattice of cubes. They 
found that cosmic rays align with that specific pattern. The team 
highlighted the Greisen—Zatsepin—Kuzmin (GZK) limit which refers 
to cosmic ray particle interaction with cosmic background radiation 
that creates an apparent boundary for cosmic ray particles. They say 
in a paper entitled ‘Constraints on the Universe as a Numerical 
Simulation’ that this ‘pattern of constraint’ is exactly what you 


would find with a computer simulation. They also made the point 
that a simulation would create its own ‘laws of physics’ that would 
limit possibility. I’ve been making the same point for decades that 
the perceived laws of physics relate only to this reality, or what I 
would later call the simulation. When designers write codes to create 
computer and virtual reality games they are the equivalent of the 
laws of physics for that game. Players interact within the limitations 
laid out by the coding. In the same way those who wrote the codes 
for the simulation decided the laws of physics that would apply. 
These can be overridden by expanded states of consciousness, but 
not by those enslaved in only five-sense awareness where simulation 
codes rule. Overriding the codes is what people call ‘miracles’. They 
are not. They are bypassing the encoded limits of the simulation. A 
population caught in simulation perception would have no idea that 
this was their plight. As the Bonn paper said: ‘Like a prisoner in a 
pitch-black cell we would not be able to see the “walls” of our 
prison,’ That’s true if people remain mesmerised by the five senses. 
Open to expanded awareness and those walls become very clear. The 
main one is the speed of light. 

American theoretical physicist James Gates is another who has 
explored the simulation question and found considerable evidence 
to support the idea. Gates was Professor of Physics at the University 
of Maryland, Director of The Center for String and Particle Theory, 
and on Barack Obama’s Council of Advisors on Science and 
Technology. He and his team found computer codes of digital data 
embedded in the fabric of our reality. They relate to on-off electrical 
charges of 1 and 0 in the binary system used by computers. “We have 
no idea what they are doing there’, Gates said. They found within 
the energetic fabric mathematical sequences known as error- 
correcting codes or block codes that ‘reboot’ data to its original state 
or ‘default settings’ when something knocks it out of sync. Gates was 
asked if he had found a set of equations embedded in our reality 
indistinguishable from those that drive search engines and browsers 
and he said: ‘That is correct.’ Rich Terrile, director of the Centre for 
Evolutionary Computation and Automated Design at NASA’s Jet 


Propulsion Laboratory, has said publicly that he believes the 
Universe is a digital hologram that must have been created by a form 
of intelligence. I agree with that in every way. Waveform information 
is delivered electrically by the senses to the brain which constructs a 
digital holographic reality that we call the ‘world’. This digital level 
of reality can be read by the esoteric art of numerology. Digital 
holograms are at the cutting edge of holographics today. We have 
digital technology everywhere designed to access and manipulate 
our digital level of perceived reality. Synthetic mRNA in ‘Covid 
vaccines’ has a digital component to manipulate the body’s digital 
‘operating system’. 


Reality is numbers 


How many know that our reality can be broken down to numbers 
and codes that are the same as computer games? Max Tegmark, a 
physicist at the Massachusetts Institute of Technology (MIT), is the 
author of Our Mathematical Universe in which he lays out how reality 
can be entirely described by numbers and maths in the way that a 
video game is encoded with the ‘physics’ of computer games. Our 
world and computer virtual reality are essentially the same. 
Tegmark imagines the perceptions of characters in an advanced 
computer game when the graphics are so good they don’t know they 
are in a game. They think they can bump into real objects 
(electromagnetic resistance in our reality), fall in love and feel 
emotions like excitement. When they began to study the apparently 
‘physical world’ of the video game they would realise that 
everything was made of pixels (which have been found in our 
energetic reality as must be the case when on one level our world is 
digital). What computer game characters thought was physical 
‘stuff’, Tegmark said, could actually be broken down into numbers: 


And we're exactly in this situation in our world. We look around and it doesn’t seem that 
mathematical at all, but everything we see is made out of elementary particles like quarks and 
electrons. And what properties does an electron have? Does it have a smell or a colour or a 
texture? No! ... We physicists have come up with geeky names for [Electron] properties, like 


electric charge, or spin, or lepton number, but the electron doesn’t care what we call it, the 
properties are just numbers. 


This is the illusory reality Gnostics were describing. This is the 
simulation. The A, C, G, and T codes of DNA have a binary value — 
A and C = 0 while G and T = 1. This has to be when the simulation is 
digital and the body must be digital to interact with it. Recurring 
mathematical sequences are encoded throughout reality and the 
body. They include the Fibonacci sequence in which the two 
previous numbers are added to get the next one, as in... 1, 1, 2, 3, 5, 
8, 13, 21, 34, 55, etc. The sequence is encoded in the human face and 
body, proportions of animals, DNA, seed heads, pine cones, trees, 
shells, spiral galaxies, hurricanes and the number of petals in a 
flower. The list goes on and on. There are fractal patterns — a ‘never- 
ending pattern that is infinitely complex and self-similar across all 
scales in the as above, so below, principle of holograms. These and 
other famous recurring geometrical and mathematical sequences 
such as Phi, Pi, Golden Mean, Golden Ratio and Golden Section are 
computer codes of the simulation. I had to laugh and give my head a 
shake the day I finished this book and it went into the production 
stage. I was sent an article in Scientific American published in April, 
2021, with the headline ‘Confirmed! We Live in a Simulation’. Two 
decades after I first said our reality is a simulation and the speed of 
light is it’s outer limit the article suggested that we do live ina 
simulation and that the speed of light is its outer limit. I left school at 
15 and never passed a major exam in my life while the writer was up 
to his eyes in qualifications. As I will explain in the final chapter 
knowing is far better than thinking and they come from very different 
sources. The article rightly connected the speed of light to the 
processing speed of the ‘Matrix’ and said what has been in my books 
all this time ... ‘If we are in a simulation, as it appears, then space is 
an abstract property written in code. It is not real’. No it’s not and if 
we live in a simulation something created it and it wasn’t us. ‘That 
David Icke says we are manipulated by aliens’ — he’s crackers.’ 


The reality that humanity thinks is so real is an illusion. Politicians, 
governments, scientists, doctors, academics, law enforcement, 
media, school and university curriculums, on and on, are all 
founded on a world that does not exist except as a simulated prison 
cell. Is it such a stretch to accept that “Covid’ doesn’t exist when our 
entire ‘physical’ reality doesn’t exist? Revealed here is the 
knowledge kept under raps in the Cult networks of 
compartmentalised secrecy to control humanity’s sense of reality by 
inducing the population to believe in a reality that’s not real. If it 
wasn’t so tragic in its experiential consequences the whole thing 
would be hysterically funny. None of this is new to Renegade Minds. 
Ancient Greek philosopher Plato (about 428 to about 347BC) was a 
major influence on Gnostic belief and he described the human plight 
thousands of years ago with his Allegory of the Cave. He told the 
symbolic story of prisoners living in a cave who had never been 
outside. They were chained and could only see one wall of the cave 
while behind them was a fire that they could not see. Figures walked 
past the fire casting shadows on the prisoners’ wall and those 
moving shadows became their sense of reality. Some prisoners began 
to study the shadows and were considered experts on them (today’s 
academics and scientists), but what they studied was only an illusion 
(today’s academics and scientists). A prisoner escaped from the cave 
and saw reality as it really is. When he returned to report this 
revelation they didn’t believe him, called him mad and threatened to 
kill him if he tried to set them free. Plato’s tale is not only a brilliant 
analogy of the human plight and our illusory reality. It describes, 
too, the dynamics of the ‘Covid’ hoax. I have only skimmed the 
surface of these subjects here. The aim of this book is to crisply 
connect all essential dots to put what is happening today into its true 
context. All subject areas and their connections in this chapter are 
covered in great evidential detail in Everything You Need To Know, 
But Have Never Been Told and The Answer. 


They say that bewildered people ‘can’t see the forest for the trees’. 
Humanity, however, can’t see the forest for the twigs. The five senses 


see only twigs while Renegade Minds can see the forest and it’s the 
forest where the answers lie with the connections that reveals. 
Breaking free of perceptual programming so the forest can be seen is 
the way we turn all this around. Not breaking free is how humanity 
got into this mess. The situation may seem hopeless, but I promise 
you it’s not. We are a perceptual heartbeat from paradise if only we 
knew. 


CHAPTER TWELVE 
Escaping Wetiko 


Life is simply a vacation from the infinite 
Dean Cavanagh 


enegade Minds weave the web of life and events and see 

common themes in the apparently random. They are always 
there if you look for them and their pursuit is aided by incredible 
synchronicity that comes when your mind is open rather than 
mesmerised by what it thinks it can see. 


Infinite awareness is infinite possibility and the more of infinite 
possibility that we access the more becomes infinitely possible. That 
may be stating the apparently obvious, but it is a devastatingly- 
powerful fact that can set us free. We are a point of attention within 
an infinity of consciousness. The question is how much of that 
infinity do we choose to access? How much knowledge, insight, 
awareness, wisdom, do we want to connect with and explore? If 
your focus is only in the five senses you will be influenced by a 
fraction of infinite awareness. I mean a range so tiny that it gives 
new meaning to infinitesimal. Limitation of self-identity and a sense 
of the possible limit accordingly your range of consciousness. We are 
what we think we are. Life is what we think it is. The dream is the 
dreamer and the dreamer is the dream. Buddhist philosophy puts it 
this way: ‘As a thing is viewed, so it appears.” Most humans live in 
the realm of touch, taste, see, hear, and smell and that’s the limit of 
their sense of the possible and sense of self. Many will follow a 
religion and speak of a God in his heaven, but their lives are still 


dominated by the five senses in their perceptions and actions. The 
five senses become the arbiter of everything. When that happens all 
except a smear of infinity is sealed away from influence by the rigid, 
unyielding, reality bubbles that are the five-sense human or 
Phantom Self. Archon Cult methodology is to isolate consciousness 
within five-sense reality — the simulation — and then program that 
consciousness with a sense of self and the world through a deluge of 
life-long information designed to instil the desired perception that 
allows global control. Efforts to do this have increased dramatically 
with identity politics as identity bubbles are squeezed into the 
minutiae of five-sense detail which disconnect people even more 
profoundly from the infinite ‘T’. 


Five-sense focus and self-identity are like a firewall that limits 
access to the infinite realms. You only perceive one radio or 
television station and no other. We’ll take that literally for a moment. 
Imagine a vast array of stations giving different information and 
angles on reality, but you only ever listen to one. Here we have the 
human plight in which the population is overwhelmingly confined 
to CultFM. This relates only to the frequency range of CultFM and 
limits perception and insight to that band — limits possibility to that 
band. It means you are connecting with an almost imperceptibly 
minuscule range of possibility and creative potential within the 
infinite Field. It’s a world where everything seems apart from 
everything else and where synchronicity is rare. Synchronicity is 
defined in the dictionary as ‘the happening by chance of two or more 
related or similar events at the same time’. Use of ‘by chance’ betrays 
a complete misunderstanding of reality. Synchronicity is not ‘by 
chance’. As people open their minds, or ‘awaken’ to use the term, 
they notice more and more coincidences in their lives, bits of ‘luck’, 
apparently miraculous happenings that put them in the right place 
at the right time with the right people. Days become peppered with 
‘fancy meeting you here’ and ‘what are the chances of that?” My 
entire life has been lived like this and ever more so since my own 
colossal awakening in 1990 and 91 which transformed my sense of 
reality. Synchronicity is not ‘by chance’; it is by accessing expanded 


realms of possibility which allow expanded potential for 
manifestation. People broadcasting the same vibe from the same 
openness of mind tend to be drawn ‘by chance’ to each other 
through what I call frequency magnetism and it’s not only people. In 
the last more than 30 years incredible synchronicity has also led me 
through the Cult maze to information in so many forms and to 
crucial personal experiences. These ‘coincidences’ have allowed me 
to put the puzzle pieces together across an enormous array of 
subjects and situations. Those who have breached the bubble of five- 
sense reality will know exactly what I mean and this escape from the 
perceptual prison cell is open to everyone whenever they make that 
choice. This may appear super-human when compared with the 
limitations of ‘human’, but it’s really our natural state. ‘Human’ as 
currently experienced is consciousness in an unnatural state of 
induced separation from the infinity of the whole. I’ll come to how 
this transformation into unity can be made when I have described in 
more detail the force that holds humanity in servitude by denying 
this access to infinite self. 


The Wetiko factor 


I have been talking and writing for decades about the way five-sense 
mind is systematically barricaded from expanded awareness. I have 
used the analogy of a computer (five-sense mind) and someone at 
the keyboard (expanded awareness). Interaction between the 
computer and the operator is symbolic of the interaction between 
five-sense mind and expanded awareness. The computer directly 
experiences the Internet and the operator experiences the Internet 
via the computer which is how it’s supposed to be — the two working 
as one. Archons seek to control that point where the operator 
connects with the computer to stop that interaction (Fig 20). Now the 
operator is banging the keyboard and clicking the mouse, but the 
computer is not responding and this happens when the computer is 
taken over — possessed — by an appropriately-named computer ‘virus’. 
The operator has lost all influence over the computer which goes its 
own way making decisions under the control of the ‘virus’. I have 


just described the dynamic through which the force known to 
Gnostics as Yaldabaoth and Archons disconnects five-sense mind 
from expanded awareness to imprison humanity in perceptual 
servitude. 
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Figure 20: The mind ‘virus’ | have been writing about for decades seeks to isolate five-sense 
mind (the computer) from the true ‘I’. (Image by Neil Hague). 


About a year ago I came across a Native American concept of 
Wetiko which describes precisely the same phenomenon. Wetiko is 
the spelling used by the Cree and there are other versions including 
wintiko and windigo used by other tribal groups. They spell the 
name with lower case, but I see Wetiko as a proper noun as with 
Archons and prefer a capital. I first saw an article about Wetiko by 
writer and researcher Paul Levy which so synced with what I had 
been writing about the computer/operator disconnection and later 
the Archons. I then read his book, the fascinating Dispelling Wetiko, 
Breaking the Spell of Evil. The parallels between what I had concluded 
long before and the Native American concept of Wetiko were so 
clear and obvious that it was almost funny. For Wetiko see the 
Gnostic Archons for sure and the Jinn, the Predators, and every 
other name for a force of evil, inversion and chaos. Wetiko is the 
Native American name for the force that divides the computer from 


the operator (Fig 21). Indigenous author Jack D. Forbes, a founder of 
the Native American movement in the 1960s, wrote another book 
about Wetiko entitled Columbus And Other Cannibals — The Wetiko 
Disease of Exploitation, Imperialism, and Terrorism which | also read. 
Forbes says that Wetiko refers to an evil person or spirit ‘who 
terrorizes other creatures by means of terrible acts, including 
cannibalism’. Zulu shaman Credo Mutwa told me that African 
accounts tell how cannibalism was brought into the world by the 
Chitauri ‘gods’ — another manifestation of Wetiko. The distinction 
between ‘evil person or spirit’ relates to Archons/Wetiko possessing 
a human or acting as pure consciousness. Wetiko is said to be a 
sickness of the soul or spirit and a state of being that takes but gives 
nothing back — the Cult and its operatives perfectly described. Black 
Hawk, a Native American war leader defending their lands from 
confiscation, said European invaders had ‘poisoned hearts’ — Wetiko 
hearts — and that this would spread to native societies. Mention of 
the heart is very significant as we shall shortly see. Forbes writes: 
‘Tragically, the history of the world for the past 2,000 years is, in 
ereat part, the story of the epidemiology of the wetiko disease.’ Yes, 
and much longer. Forbes is correct when he says: “The wetikos 
destroyed Egypt and Babylon and Athens and Rome and 
Tenochtitlan [capital of the Aztec empire] and perhaps now they will 
destroy the entire earth.’ Evil, he said, is the number one export of a 
Wetiko culture — see its globalisation with ‘Covid’. Constant war, 
mass murder, suffering of all kinds, child abuse, Satanism, torture 
and human sacrifice are all expressions of Wetiko and the Wetiko 
possessed. The world is Wetiko made manifest, but it doesn’t have to 
be. There is a way out of this even now. 


Figure 21: The mind ‘virus’ is known to Native Americans as ‘Wetiko’. (Image by Neil Hague). 


Wetiko is the Yaldabaoth frequency distortion that seeks to attach to 
human consciousness and absorb it into its own. Once this 
connection is made Wetiko can drive the perceptions of the target 
which they believe to be coming from their own mind. All the 
horrors of history and today from mass killers to Satanists, 
paedophiles like Jeffrey Epstein and other psychopaths, are the 
embodiment of Wetiko and express its state of being in all its 
erotesqueness. The Cult is Wetiko incarnate, Yaldabaoth incarnate, 
and it seeks to facilitate Wetiko assimilation of humanity in totality 
into its distortion by manipulating the population into low 
frequency states that match its own. Paul Levy writes: 
‘Holographically enforced within the psyche of every human being 
the wetiko virus pervades and underlies the entire field of 
consciousness, and can therefore potentially manifest through any 
one of us at any moment if we are not mindful.’ The ‘Covid’ hoax 
has achieved this with many people, but others have not fallen into 
Wetiko’s frequency lair. Players in the ‘Covid’ human catastrophe 
including Gates, Schwab, Tedros, Fauci, Whitty, Vallance, Johnson, 
Hancock, Ferguson, Drosten, and all the rest, including the 
psychopath psychologists, are expressions of Wetiko. This is why 


they have no compassion or empathy and no emotional consequence 
for what they do that would make them stop doing it. Observe all 
the people who support the psychopaths in authority against the 
Pushbackers despite the damaging impact the psychopaths have on 
their own lives and their family’s lives. You are again looking at 
Wetiko possession which prevents them seeing through the lies to 
the obvious scam going on. Why can’t they see it? Wetiko won't let 
them see it. The perceptual divide that has now become a chasm is 
between the Wetikoed and the non-Wetikoed. 


Paul Levy describes Wetiko in the same way that I have long 
described the Archontic force. They are the same distorted 
consciousness operating across dimensions of reality: ‘... the subtle 
body of wetiko is not located in the third dimension of space and 
time, literally existing in another dimension ... it is able to affect 
ordinary lives by mysteriously interpenetrating into our three- 
dimensional world.’ Wetiko does this through its incarnate 
representatives in the Cult and by weaving itself into The Field 
which on our level of reality is the electromagnetic information field 
of the simulation or Matrix. More than that, the simulation is Wetiko 
/ Yaldabaoth. Caleb Scharf, Director of Astrobiology at Columbia 
University, has speculated that ‘alien life’ could be so advanced that 
it has transcribed itself into the quantum realm to become what we 
call physics. He said intelligence indistinguishable from the fabric of 
the Universe would solve many of its greatest mysteries: 


Perhaps hyper-advanced life isn’t just external. Perhaps it’s already all around. It is embedded 
in what we perceive to be physics itself, from the root behaviour of particles and fields to the 
phenomena of complexity and emergence ... In other words, life might not just be in the 
equations. It might BE the equations [My emphasis]. 


Scharf said it is possible that ‘we don’t recognise advanced life 
because it forms an integral and unsuspicious part of what we’ve 
considered to be the natural world’. I agree. Wetiko/Yaldabaoth is the 
simulation. We are literally in the body of the beast. But that doesn’t 
mean it has to control us. We all have the power to overcome Wetiko 


influence and the Cult knows that. I doubt it sleeps too well because 
it knows that. 


This, I suggest, is how it all works. There are two Fields. One is the 
fierce electromagnetic light of the Matrix within the speed of light; 
the other is the ‘watery light’ of The Field beyond the walls of the 
Matrix that connects with the Great Infinity. Five-sense mind and the 
decoding systems of the body attach us to the Field of Matrix light. 
They have to or we could not experience this reality. Five-sense mind 
sees only the Matrix Field of information while our expanded 
consciousness is part of the Infinity Field. When we open our minds, 
and most importantly our hearts, to the Infinity Field we have a 
mission control which gives us an expanded perspective, a road 
map, to understand the nature of the five-sense world. If we are 
isolated only in five-sense mind there is no mission control. We’re on 
our own trying to understand a world that’s constantly feeding us 
information to ensure we do not understand. People in this state can 
feel ‘lost’ and bewildered with no direction or radar. You can see 
ever more clearly those who are influenced by the Fields of Big 
Infinity or little five-sense mind simply by their views and behaviour 
with regard to the ‘Covid’ hoax. We have had this division 
throughout known human history with the mass of the people on 
one side and individuals who could see and intuit beyond the walls 
of the simulation — Plato’s prisoner who broke out of the cave and 
saw reality for what it is. Such people have always been targeted by 
Wetiko/Archon-possessed authority, burned at the stake or 
demonised as mad, bad and dangerous. The Cult today and its 
global network of ‘anti-hate’, ‘anti-fascist’ Woke groups are all 
expressions of Wetiko attacking those exposing the conspiracy, 
‘Covid’ lies and the ‘vaccine’ agenda. 

Woke as a whole is Wetiko which explains its black and white 
mentality and how at one it is with the Wetiko-possessed Cult. Paul 
Levy said: ‘To be in this paradigm is to still be under the thrall of a 
two-valued logic — where things are either true or false — of a 


wetikoized mind.’ Wetiko consciousness is in a permanent rage, 
therefore so is Woke, and then there is Woke inversion and 
contradiction. ‘Anti-fascists’ act like fascists because fascists and ‘anti- 
fascists’ are both Wetiko at work. Political parties act the same while 
claiming to be different for the same reason. Secret society and 
satanic rituals are attaching initiates to Wetiko and the cold, ruthless, 
psychopathic mentality that secures the positions of power all over 
the world is Wetiko. Reframing ‘training programmes’ have the 
same cumulative effect of attaching Wetiko and we have their 
graduates described as automatons and robots with a cold, 
psychopathic, uncaring demeanour. They are all traits of Wetiko 
possession and look how many times they have been described in 
this book and elsewhere with regard to personnel behind ‘Covid’ 
including the police and medical profession. Climbing the greasy 
pole in any profession in a Wetiko society requires traits of Wetiko to 
get there and that is particularly true of politics which is not about 
fair competition and pre-eminence of ideas. It is founded on how 
many backs you can stab and arses you can lick. This culminated in 
the global ‘Covid’ coordination between the Wetiko possessed who 
pulled it off in all the different countries without a trace of empathy 
and compassion for their impact on humans. Our sight sense can see 
only holographic form and not the Field which connects holographic 
form. Therefore we perceive ‘physical’ objects with ‘space’ in 
between. In fact that ‘space’ is energy/consciousness operating on 
multiple frequencies. One of them is Wetiko and that connects the 
Cult psychopaths, those who submit to the psychopaths, and those 
who serve the psychopaths in the media operations of the world. 
Wetiko is Gates. Wetiko is the mask-wearing submissive. Wetiko is 
the fake journalist and “‘fact-checker’. The Wetiko Field is 
coordinating the whole thing. Psychopaths, gofers, media 
operatives, ‘anti-hate’ hate groups, ‘fact-checkers’ and submissive 
people work as one unit even without human coordination because they 
are attached to the same Field which is organising it all (Fig 22). Paul 
Levy is here describing how Wetiko-possessed people are drawn 
together and refuse to let any information breach their rigid 


perceptions. He was writing long before ‘Covid’, but I think you will 
recognise followers of the ‘Covid’ religion oh just a little bit: 


People who are channelling the vibratory frequency of wetiko align with each other through 
psychic resonance to reinforce their unspoken shared agreement so as to uphold their 
deranged view of reality. Once an unconscious content takes possession of certain 
individuals, it irresistibly draws them together by mutual attraction and knits them into groups 
tied together by their shared madness that can easily swell into an avalanche of insanity. 


A psychic epidemic is a closed system, which is to say that it is insular and not open to any 
new information or informing influences from the outside world which contradict its fixed, 
limited, and limiting perspective. 


There we have the Woke mind and the ‘Covid’ mind. Compatible 
resonance draws the awakening together, too, which is clearly 
happening today. 


THE WETIKO FIELD 


WETIKO MANIPULATION 
OF THE ENERGETIC 
WAVEFIELD 


Figure 22: The Wetiko Field from which the Cult pyramid and its personnel are made 
manifest. (Image by Neil Hague). 


Wetiko doesn’t care about humans. It’s not human; it just possesses 
humans for its own ends and the effect (depending on the scale of 


possession) can be anything from extreme psychopathy to 
unquestioning obedience. Wetiko’s worst nightmare is for human 
consciousness to expand beyond the simulation. Everything is 
focussed on stopping that happening through control of 
information, thus perception, thus frequency. The ‘education 
system’, media, science, medicine, academia, are all geared to 
maintaining humanity in five-sense servitude as is the constant 
stimulation of low-vibrational mental and emotional states (see 
‘Covid’). Wetiko seeks to dominate those subconscious spaces 
between five-sense perception and expanded consciousness where 
the computer meets the operator. From these subconscious hiding 
places Wetiko speaks to us to trigger urges and desires that we take 
to be our own and manipulate us into anything from low-vibrational 
to psychopathic states. Remember how Islam describes the Jinn as 
invisible tricksters that ‘whisper’ and confuse. Wetiko is the origin of 
the ‘trickster god’ theme that you find in cultures all over the world. 
Jinn, like the Archons, are Wetiko which is terrified of humans 
awakening and reconnecting with our true self for then its energy 
source has gone. With that the feedback loop breaks between Wetiko 
and human perception that provides the energetic momentum on 
which its very existence depends as a force of evil. Humans are both 
its target and its source of survival, but only if we are operating in 
low-vibrational states of fear, hate, depression and the background 
anxiety that most people suffer. We are Wetiko’s target because we 
are its key to survival. It needs us, not the other way round. Paul 
Levy writes: 


A vampire has no intrinsic, independent, substantial existence in its own right; it only exists in 
relation to us. The pathogenic, vampiric mind-parasite called wetiko is nothing in itself — not 
being able to exist from its own side — yet it has a ‘virtual reality’ such that it can potentially 
destroy our species ... 


... The fact that a vampire is not reflected by a mirror can also mean that what we need to see 
is that there’s nothing, no-thing to see, other than ourselves. The fact that wetiko is the 
expression of something inside of us means that the cure for wetiko is with us as well. The 
critical issue is finding this cure within us and then putting it into effect. 


Evil begets evil because if evil does not constantly expand and 
find new sources of energetic sustenance its evil, its distortion, dies 
with the assimilation into balance and harmony. Love is the garlic to 
Wetiko’s vampire. Evil, the absence of love, cannot exist in the 
presence of love. I think I see a way out of here. I have emphasised 
so many times over the decades that the Archons/Wetiko and their 
Cult are not all powerful. They are not. I don’t care how it looks even 
now they are not. I have not called them little boys in short trousers 
for effect. I have said it because it is true. Wetiko’s insatiable desire 
for power over others is not a sign of its omnipotence, but its 
insecurity. Paul Levy writes: “Due to the primal fear which 
ultimately drives it and which it is driven to cultivate, wetiko’s body 
politic has an intrinsic and insistent need for centralising power and 
control so as to create imagined safety for itself.’ Yeeeeeees! Exactly! 
Why does Wetiko want humans in an ongoing state of fear? Wetiko 
itself is fear and it is petrified of love. As evil is an absence of love, so 
love is an absence of fear. Love conquers all and especially Wetiko 
which is fear. Wetiko brought fear into the world when it wasn’t here 
before. Fear was the ‘fall’, the fall into low-frequency ignorance and 
illusion — fear is False Emotion Appearing Real. The simulation is 
driven and energised by fear because Wetiko/Yaldabaoth (fear) are 
the simulation. Fear is the absence of love and Wetiko is the absence 
of love. 


We can now view current events from this level of perspective. The 
‘Covid’ hoax has generated momentous amounts of ongoing fear, 
anxiety, depression and despair which have empowered Wetiko. No 
wonder people like Gates have been the instigators when they are 
Wetiko incarnate and exhibit every trait of Wetiko in the extreme. 
See how cold and unemotional these people are like Gates and his 
cronies, how dead of eye they are. That’s Wetiko. Sabbatians are 
Wetiko and everything they control including the World Health 
Organization, Big Pharma and the ‘vaccine’ makers, national ‘health’ 


hierarchies, corporate media, Silicon Valley, the banking system, and 
the United Nations with its planned transformation into world 
government. All are controlled and possessed by the Wetiko 
distortion into distorting human society in its image. We are with 
this knowledge at the gateway to understanding the world. 
Divisions of race, culture, creed and sexuality are diversions to hide 
the real division between those possessed and influenced by Wetiko 
and those that are not. The ‘Covid’ hoax has brought both clearly 
into view. Human behaviour is not about race. Tyrants and 
dictatorships come in all colours and creeds. What unites the US 
president bombing the innocent and an African tribe committing 
genocide against another as in Rwanda? What unites them? Wetiko. 
All wars are Wetiko, all genocide is Wetiko, all hunger over centuries 
in a world of plenty is Wetiko. Children going to bed hungry, 
including in the West, is Wetiko. Cult-generated Woke racial 
divisions that focus on the body are designed to obscure the reality 
that divisions in behaviour are manifestations of mind, not body. 
Obsession with body identity and group judgement is a means to 
divert attention from the real source of behaviour — mind and 
perception. Conflict sown by the Woke both within themselves and 
with their target groups are Wetiko providing lunch for itself 
through still more agents of the division, chaos, and fear on which it 
feeds. The Cult is seeking to assimilate the entirety of humanity and 
all children and young people into the Wetiko frequency by 
manipulating them into states of fear and despair. Witness all the 
suicide and psychological unravelling since the spring of 2020. 
Wetiko psychopaths want to impose a state of unquestioning 
obedience to authority which is no more than a conduit for Wetiko to 
enforce its will and assimilate humanity into itself. It needs us to 
believe that resistance is futile when it fears resistance and even 
more so the game-changing non-cooperation with its impositions. It 
can use violent resistance for its benefit. Violent impositions and 
violent resistance are both Wetiko. The Power of Love with its Power 
of No will sweep Wetiko from our world. Wetiko and its Cult know 
that. They just don’t want us to know. 


This brings me to AI or artificial intelligence and something else 
Wetikos don’t want us to know. What is AI really? I know about 
computer code algorithms and AI that learns from data input. These, 
however, are more diversions, the expeditionary force, for the real Al 
that they want to connect to the human brain as promoted by Silicon 
Valley Wetikos like Kurzweil. What is this AI? It is the frequency of 
Wetiko, the frequency of the Archons. The connection of AI to the 
human brain is the connection of the Wetiko frequency to create a 
Wetiko hive mind and complete the job of assimilation. The hive 
mind is planned to be controlled from Israel and China which are 
both 100 percent owned by Wetiko Sabbatians. The assimilation 
process has been going on minute by minute in the ‘smart’ era which 
fused with the ‘Covid’ era. We are told that social media is 
scrambling the minds of the young and changing their personality. 
This is true, but what is social media? Look more deeply at how it 
works, how it creates divisions and conflict, the hostility and cruelty, 
the targeting of people until they are destroyed. That’s Wetiko. Social 
media is manipulated to tune people to the Wetiko frequency with 
all the emotional exploitation tricks employed by platforms like 
Facebook and its Wetiko front man, Zuckerberg. Facebook’s 
Instagram announced a new platform for children to overcome a 
legal bar on them using the main site. This is more Wetiko 
exploitation and manipulation of kids. Amnesty International 
likened the plan to foxes offering to guard the henhouse and said it 
was incompatible with human rights. Since when did Wetiko or 
Zuckerberg (I repeat myself) care about that? Would Brin and Page 
at Google, Wojcicki at YouTube, Bezos at Amazon and whoever the 
hell runs Twitter act as they do if they were not channelling Wetiko? 
Would those who are developing technologies for no other reason 
than human control? How about those designing and selling 
technologies to kill people and Big Pharma drug and ‘vaccine’ 
producers who know they will end or devastate lives? Quite a 
thought for these people to consider is that if you are Wetiko in a 
human life you are Wetiko on the ‘other side’ unless your frequency 


changes and that can only change by a change of perception which 
becomes a change of behaviour. Where Gates is going does not bear 
thinking about although perhaps that’s exactly where he wants to go. 
Either way, that’s where he’s going. His frequency will make it so. 


The frequency lair 

I have been saying for a long time that a big part of the addiction to 
smartphones and devices is that a frequency is coming off them that 
entraps the mind. People spend ages on their phones and sometimes 
even a minute or so after they put them down they pick them up 
again and it all repeats. ‘Covid’ lockdowns will have increased this 
addiction a million times for obvious reasons. Addictions to alcohol 
overindulgence and drugs are another way that Wetiko entraps 
consciousness to attach to its own. Both are symptoms of low- 
vibrational psychological distress which alcoholism and drug 
addiction further compound. Do we think it’s really a coincidence 
that access to them is made so easy while potions that can take 
people into realms beyond the simulation are banned and illegal? I 
have explored smartphone addiction in other books, the scale is 
mind-blowing, and that level of addiction does not come without 
help. Tech companies that make these phones are Wetiko and they 
will have no qualms about destroying the minds of children. We are 
seeing again with these companies the Wetiko perceptual 
combination of psychopathic enforcers and weak and meek 
unquestioning compliance by the rank and file. 

The global Smart Grid is the Wetiko Grid and it is crucial to 
complete the Cult endgame. The simulation is radiation and we are 
being deluged with technological radiation on a devastating scale. 
Wetiko frauds like Elon Musk serve Cult interests while occasionally 
criticising them to maintain his street-cred. 5G and other forms of 
Wi-Fi are being directed at the earth from space on a volume and 
scale that goes on increasing by the day. Elon Musk’s (officially) 
SpaceX Starlink project is in the process of putting tens of thousands 
of satellites in low orbit to cover every inch of the planet with 5G 
and other Wi-Fi to create Kurzweil’s global ‘cloud’ to which the 


human mind is planned to be attached very soon. SpaceX has 
approval to operate 12,000 satellites with more than 1,300 launched 
at the time of writing and applications filed for 30,000 more. Other 
operators in the Wi-Fi, 5G, low-orbit satellite market include 
OneWeb (UK), Telesat (Canada), and AST & Science (US). Musk tells 
us that AI could be the end of humanity and then launches a 
company called Neuralink to connect the human brain to computers. 
Musk’s (in theory) Tesla company is building electric cars and the 
driverless vehicles of the smart control grid. As frauds and 
bullshitters go Elon Musk in my opinion is Major League. 


5G and technological radiation in general are destructive to 
human health, genetics and psychology and increasing the strength 
of artificial radiation underpins the five-sense perceptual bubbles 
which are themselves expressions of radiation or electromagnetism. 
Freedom activist John Whitehead was so right with his ‘databit by 
databit, we are building our own electronic concentration camps’. 
The Smart Grid and 5G is a means to control the human mind and 
infuse perceptual information into The Field to influence anyone in 
sync with its frequency. You can change perception and behaviour 
en masse if you can manipulate the population into those levels of 
frequency and this is happening all around us today. The arrogance 
of Musk and his fellow Cult operatives knows no bounds in the way 
that we see with Gates. Musk’s satellites are so many in number 
already they are changing the night sky when viewed from Earth. 
The astronomy community has complained about this and they have 
seen nothing yet. Some consequences of Musk’s Wetiko hubris 
include: Radiation; visible pollution of the night sky; interference 
with astronomy and meteorology; ground and water pollution from 
intensive use of increasingly many spaceports; accumulating space 
debris; continual deorbiting and burning up of aging satellites, 
polluting the atmosphere with toxic dust and smoke; and ever- 
increasing likelihood of collisions. A collective public open letter of 
complaint to Musk said: 


We are writing to you ... because SpaceX is in process of surrounding the Earth with a 
network of thousands of satellites whose very purpose is to irradiate every square inch of the 


Earth. SpaceX, like everyone else, is treating the radiation as if it were not there. As if the 
mitochondria in our cells do not depend on electrons moving undisturbed from the food we 
digest to the oxygen we breathe. 


As if our nervous systems and our hearts are not subject to radio frequency interference like 
any piece of electronic equipment. As if the cancer, diabetes, and heart disease that now 
afflict a majority of the Earth’s population are not metabolic diseases that result from 
interference with our cellular machinery. As if insects everywhere, and the birds and animals 
that eat them, are not starving to death as a result. 


People like Musk and Gates believe in their limitless Wetiko 
arrogance that they can do whatever they like to the world because 
they own it. Consequences for humanity are irrelevant. It’s 
absolutely time that we stopped taking this shit from these self- 
styled masters of the Earth when you consider where this is going. 


Why is the Cult so anti-human? 

I hear this question often: Why would they do this when it will affect 
them, too? Ah, but will it? Who is this them? Forget their bodies. 
They are just vehicles for Wetiko consciousness. When you break it 
all down to the foundations we are looking at a state of severely 
distorted consciousness targeting another state of consciousness for 
assimilation. The rest is detail. The simulation is the fly-trap in 
which unique sensations of the five senses create a cycle of addiction 
called reincarnation. Renegade Minds see that everything which 
happens in our reality is a smaller version of the whole picture in 
line with the holographic principle. Addiction to the radiation of 
smart technology is a smaller version of addiction to the whole 
simulation. Connecting the body/brain to AI is taking that addiction 
on a giant step further to total ongoing control by assimilating 
human incarnate consciousness into Wetiko. I have watched during 
the ‘Covid’ hoax how many are becoming ever more profoundly 
attached to Wetiko’s perceptual calling cards of aggressive response 
to any other point of view (‘There is no other god but me’), 
psychopathic lack of compassion and empathy, and servile 
submission to the narrative and will of authority. Wetiko is the 
psychopaths and subservience to psychopaths. The Cult of Wetiko is 


so anti-human because it is not human. It embarked on a mission to 
destroy human by targeting everything that it means to be human 
and to survive as human. ‘Covid’ is not the end, just a means to an 
end. The Cult with its Wetiko consciousness is seeking to change 
Earth systems, including the atmosphere, to suit them, not humans. 
The gathering bombardment of 5G alone from ground and space is 
dramatically changing The Field with which the five senses interact. 
There is so much more to come if we sit on our hands and hope it 
will all go away. It is not meant to go away. It is meant to get ever 
more extreme and we need to face that while we still can — just. 


Carbon dioxide is the gas of life. Without that human is over. 
Kaput, gone, history. No natural world, no human. The Cult has 
created a cock and bull story about carbon dioxide and climate 
change to justify its reduction to the point where Gates and the 
ignoramus Biden ‘climate chief’ John Kerry want to suck it out of the 
atmosphere. Kerry wants to do this because his master Gates does. 
Wetikos have made the gas of life a demon with the usual support 
from the Wokers of Extinction Rebellion and similar organisations 
and the bewildered puppet-child that is Greta Thunberg who was 
put on the world stage by Klaus Schwab and the World Economic 
Forum. The name Extinction Rebellion is both ironic and as always 
Wetiko inversion. The gas that we need to survive must be reduced 
to save us from extinction. The most basic need of human is oxygen 
and we now have billions walking around in face nappies depriving 
body and brain of this essential requirement of human existence. 
More than that 5G at 60 gigahertz interacts with the oxygen 
molecule to reduce the amount of oxygen the body can absorb into 
the bloodstream. The obvious knock-on consequences of that for 
respiratory and cognitive problems and life itself need no further 
explanation. Psychopaths like Musk are assembling a global system 
of satellites to deluge the human atmosphere with this insanity. The 
man should be in jail. Here we have two most basic of human needs, 
oxygen and carbon dioxide, being dismantled. 


Two others, water and food, are getting similar treatment with the 
United Nations Agendas 21 and 2030 — the Great Reset — planning to 


centrally control all water and food supplies. People will not even 
own rain water that falls on their land. Food is affected at the most 
basic level by reducing carbon dioxide. We have genetic modification 
or GMO infiltrating the food chain on a mass scale, pesticides and 
herbicides polluting the air and destroying the soil. Freshwater fish 
that provide livelihoods for 60 million people and feed hundreds of 
millions worldwide are being ‘pushed to the brink’ according the 
conservationists while climate change is the only focus. Now we 
have Gates and Schwab wanting to dispense with current food 
sources all together and replace them with a synthetic version which 
the Wetiko Cult would control in terms of production and who eats 
and who doesn’t. We have been on the Totalitarian Tiptoe to this for 
more than 60 years as food has become ever more processed and full 
of chemical shite to the point today when it’s not natural food at all. 
As Dr Tom Cowan says: ‘If it has a label don’t eat it.’ Bill Gates is 
now the biggest owner of farmland in the United States and he does 
nothing without an ulterior motive involving the Cult. Klaus Schwab 
wrote: ‘To feed the world in the next 50 years we will need to 
produce as much food as was produced in the last 10,000 years ... 
food security will only be achieved, however, if regulations on 
genetically modified foods are adapted to reflect the reality that gene 
editing offers a precise, efficient and safe method of improving 
crops.’ Liar. People and the world are being targeted with 
aluminium through vaccines, chemtrails, food, drink cans, and 
endless other sources when aluminium has been linked to many 
health issues including dementia which is increasing year after year. 
Insects, bees and wildlife essential to the food chain are being 
deleted by pesticides, herbicides and radiation which 5G is 
dramatically increasing with 6G and 7G to come. The pollinating bee 
population is being devastated while wildlife including birds, 
dolphins and whales are having their natural radar blocked by the 
effects of ever-increasing radiation. In the summer windscreens used 
to be splattered with insects so numerous were they. It doesn’t 
happen now. Where have they gone? 


Synthetic everything 

The Cult is introducing genetically-modified versions of trees, plants 
and insects including a Gates-funded project to unleash hundreds of 
millions of genetically-modified, lab-altered and patented male 
mosquitoes to mate with wild mosquitoes and induce genetic flaws 
that cause them to die out. Clinically-insane Gates-funded Japanese 
researchers have developed mosquitos that spread vaccine and are 
dubbed ‘flying vaccinators’. Gates is funding the modification of 
weather patterns in part to sell the myth that this is caused by carbon 
dioxide and he’s funding geoengineering of the skies to change the 
atmosphere. Some of this came to light with the Gates-backed plan 
to release tonnes of chalk into the atmosphere to ‘deflect the Sun and 
cool the planet’. Funny how they do this while the heating effect of 
the Sun is not factored into climate projections focussed on carbon 
dioxide. The reason is that they want to reduce carbon dioxide (so 
don’t mention the Sun), but at the same time they do want to reduce 
the impact of the Sun which is so essential to human life and health. 
I have mentioned the sun-cholesterol-vitamin D connection as they 
demonise the Sun with warnings about skin cancer (caused by the 
chemicals in sun cream they tell you to splash on). They come from 
the other end of the process with statin drugs to reduce cholesterol 
that turns sunlight into vitamin D. A lack of vitamin D leads to a 
long list of health effects and how vitamin D levels must have fallen 
with people confined to their homes over ‘Covid’. Gates is funding 
other forms of geoengineering and most importantly chemtrails 
which are dropping heavy metals, aluminium and self-replicating 
nanotechnology onto the Earth which is killing the natural world. 
See Everything You Need To Know, But Have Never Been Told for the 
detailed background to this. 

Every human system is being targeted for deletion by a force that’s 
not human. The Wetiko Cult has embarked on the process of 
transforming the human body from biological to synthetic biological 
as I have explained. Biological is being replaced by the artificial and 
synthetic — Archontic ‘countermimicry’ — right across human society. 
The plan eventually is to dispense with the human body altogether 


and absorb human consciousness — which it wouldn't really be by 
then — into cyberspace (the simulation which is Wetiko/Yaldabaoth). 
Preparations for that are already happening if people would care to 
look. The alternative media rightly warns about globalism and ‘the 
globalists’, but this is far bigger than that and represents the end of 
the human race as we know it. The ‘bad copy’ of prime reality that 
Gnostics describe was a bad copy of harmony, wonder and beauty to 
start with before Wetiko/Yaldabaoth set out to change the simulated 
‘copy’ into something very different. The process was slow to start 
with. Entrapped humans in the simulation timeline were not 
technologically aware and they had to be brought up to intellectual 
speed while being suppressed spiritually to the point where they 
could build their own prison while having no idea they were doing 
so. We have now reached that stage where technological intellect has 
the potential to destroy us and that’s why events are moving so fast. 
Central American shaman Don Juan Matus said: 


Think for a moment, and tell me how you would explain the contradictions between the 
intelligence of man the engineer and the stupidity of his systems of belief, or the stupidity of 
his contradictory behaviour. Sorcerers believe that the predators have given us our systems of 
beliefs, our ideas of good and evil; our social mores. They are the ones who set up our dreams 
of success or failure. They have given us covetousness, greed, and cowardice. It is the 
predator who makes us complacent, routinary, and egomaniacal. 


In order to keep us obedient and meek and weak, the predators engaged themselves in a 
stupendous manoeuvre — stupendous, of course, from the point of view of a fighting strategist; 
a horrendous manoeuvre from the point of those who suffer it. They gave us their mind. The 
predators’ mind is baroque, contradictory, morose, filled with the fear of being discovered any 
minute now. 


For ‘predators’ see Wetiko, Archons, Yaldabaoth, Jinn, and all the 
other versions of the same phenomenon in cultures and religions all 
over the world. The theme is always the same because it’s true and 
it’s real. We have reached the point where we have to deal with it. 
The question is — how? 


I thought I’d use a controversial subheading to get things moving in 
terms of our response to global fascism. What do you mean ‘don’t 
fight’? What do you mean ‘walk away’? We've got to fight. We can’t 
walk away. Well, it depends what we mean by fight and walk away. 
If fighting means physical combat we are playing Wetiko’s game and 
falling for its trap. It wants us to get angry, aggressive, and direct 
hate and hostility at the enemy we think we must fight. Every war, 
every battle, every conflict, has been fought with Wetiko leading 
both sides. It’s what it does. Wetiko wants a fight, anywhere, any 
place. Just hit me, son, so I can hit you back. Wetiko hits Wetiko and 
Wetiko hits Wetiko in return. Iam very forthright as you can see in 
exposing Wetikos of the Cult, but I don’t hate them. I refuse to hate 
them. It’s what they want. What you hate you become. What you 
fight you become. Wokers, ‘anti-haters’ and ‘anti-fascists’ prove this 
every time they reach for their keyboards or don their balaclavas. By 
walk away I mean to disengage from Wetiko which includes ceasing 
to cooperate with its tyranny. Paul Levy says of Wetiko: 


The way to ‘defeat’ evil is not to try to destroy it (for then, in playing evil’s game, we have 
already lost), but rather, to find the invulnerable place within ourselves where evil is unable to 
vanquish us — this is to truly ‘win’ our battle with evil. 


Wetiko is everywhere in human society and it’s been on steroids 
since the ‘Covid’ hoax. Every shouting match over wearing masks 
has Wetiko wearing a mask and Wetiko not wearing one. It’s an 
electrical circuit of push and resist, push and resist, with Wetiko 
pushing and resisting. Each polarity is Wetiko empowering itself. 
Dictionary definitions of ‘resist’ include ‘opposing, refusing to accept 
or comply with’ and the word to focus on is ‘opposing’. What form 
does this take — setting police cars alight or ‘refusing to accept or 
comply with’? The former is Wetiko opposing Wetiko while the 
other points the way forward. This is the difference between those 
aggressively demanding that government fascism must be obeyed 
who stand in stark contrast to the great majority of Pushbackers. We 
saw this clearly with a march by thousands of Pushbackers against 
lockdown in London followed days later by a Woker-hijacked 


protest in Bristol in which police cars were set on fire. Masks were 
virtually absent in London and widespread in Bristol. Wetiko wants 
lockdown on every level of society and infuses its aggression to 
police it through its unknowing stooges. Lockdown protesters are 
the ones with the smiling faces and the hugs, The two blatantly 
obvious states of being — getting more obvious by the day — are the 
result of Wokers and their like becoming ever more influenced by 
the simulation Field of Wetiko and Pushbackers ever more 
influenced by The Field of a far higher vibration beyond the 
simulation. Wetiko can’t invade the heart which is where most 
lockdown opponents are coming from. It’s the heart that allows them 
to see through the lies to the truth in ways I will be highlighting. 


Renegade Minds know that calmness is the place from which 
wisdom comes. You won’t find wisdom in a hissing fit and wisdom 
is what we need in abundance right now. Calmness is not weakness 
— you don’t have to scream at the top of your voice to be strong. 
Calmness is indeed a sign of strength. ‘No’ means I’m not doing it. 
NOOOO!!! doesn’t mean you're not doing it even more. Volume 
does not advance ‘No — I’m not doing it’. You are just not doing it. 
Wetiko possessed and influenced don’t know how to deal with that. 
Wetiko wants a fight and we should not give it one. What it needs 
more than anything is our cooperation and we should not give that 
either. Mass rallies and marches are great in that they are a visual 
representation of feeling, but if it ends there they are irrelevant. You 
demand that Wetikos act differently? Well, they’re not going to are 
they? They are Wetikos. We don’t need to waste our time demanding 
that something doesn’t happen when that will make no difference. 
We need to delete the means that allows it to happen. This, invariably, 
is our cooperation. You can demand a child stop firing a peashooter 
at the dog or you can refuse to buy the peashooter. If you provide 
the means you are cooperating with the dog being smacked on the 
nose with a pea. How can the authorities enforce mask-wearing if 
millions in a country refuse? What if the 74 million Pushbackers that 
voted for Trump in 2020 refused to wear masks, close their 
businesses or stay in their homes. It would be unenforceable. The 


few control the many through the compliance of the many and that’s 
always been the dynamic be it ‘Covid’ regulations or the Roman 
Empire. I know people can find it intimidating to say no to authority 
or stand out in a crowd for being the only one with a face on display; 
but it has to be done or it’s over. I hope I’ve made clear in this book 
that where this is going will be far more intimidating than standing 
up now and saying ‘No’ — I will not cooperate with my own 
enslavement and that of my children. There might be consequences 
for some initially, although not so if enough do the same. The 
question that must be addressed is what is going to happen if we 
don’t? It is time to be strong and unyieldingly so. No means no. Not 
here and there, but everywhere and always. I have refused to wear a 
mask and obey all the other nonsense. I will not comply with 
tyranny. I repeat: Fascism is not imposed by fascists — there are never 
enough of them. Fascism is imposed by the population acquiescing 
to fascism. I will not do it. I will die first, or my body will. Living 
meekly under fascism is a form of death anyway, the death of the 
spirit that Martin Luther King described. 


Making things happen 

We must not despair. This is not over till it’s over and it’s far from 
that. The ‘fat lady’ must refuse to sing. The longer the ‘Covid’ hoax 
has dragged on and impacted on more lives we have seen an 
awakening of phenomenal numbers of people worldwide to the 
realisation that what they have believed all their lives is not how the 
world really is. Research published by the system-serving University 
of Bristol and King’s College London in February, 2021, concluded: 
‘One in every 11 people in Britain say they trust David Icke’s take on 
the coronavirus pandemic.’ It will be more by now and we have 
gathering numbers to build on. We must urgently progress from 
seeing the scam to ceasing to cooperate with it. Prominent German 
lawyer Reiner Fuellmich, also licenced to practice law in America, is 
doing a magnificent job taking the legal route to bring the 
psychopaths to justice through a second Nuremberg tribunal for 
crimes against humanity. Fuellmich has an impressive record of 


beating the elite in court and he formed the German Corona 
Investigative Committee to pursue civil charges against the main 
perpetrators with a view to triggering criminal charges. Most 
importantly he has grasped the foundation of the hoax — the PCR 
test not testing for the ‘virus’ — and Christian Drosten is therefore on 
his charge sheet along with Gates frontman Tedros at the World 
Health Organization. Major players must be not be allowed to inflict 
their horrors on the human race without being brought to book. A 
life sentence must follow for Bill Gates and the rest of them. A group 
of researchers has also indicted the government of Norway for 
crimes against humanity with copies sent to the police and the 
International Criminal Court. The lawsuit cites participation in an 
internationally-planned false pandemic and violation of 
international law and human rights, the European Commission’s 
definition of human rights by coercive rules, Nuremberg and Hague 
rules on fundamental human rights, and the Norwegian 
constitution. We must take the initiative from hereon and not just 
complain, protest and react. 


There are practical ways to support vital mass non-cooperation. 
Organising in numbers is one. Lockdown marches in London in the 
spring in 2021 were mass non-cooperation that the authorities could 
not stop. There were too many people. Hundreds of thousands 
walked the London streets in the centre of the road for mile after 
mile while the Face-Nappies could only look on. They were 
determined, but calm, and just did it with no histrionics and lots of 
smiles. The police were impotent. Others are organising group 
shopping without masks for mutual support and imagine if that was 
happening all over. Policing it would be impossible. If the store 
refuses to serve people in these circumstances they would be faced 
with a long line of trolleys full of goods standing on their own and 
everything would have to be returned to the shelves. How would 
they cope with that if it kept happening? I am talking here about 
moving on from complaining to being pro-active; from watching 
things happen to making things happen. I include in this our 
relationship with the police. The behaviour of many Face-Nappies 


has been disgraceful and anyone who thinks they would never find 
concentration camp guards in the ‘enlightened’ modern era have 
had that myth busted big-time. The period and setting may change — 
Wetikos never do. I watched film footage from a London march in 
which a police thug viciously kicked a protestor on the floor who 
had done nothing. His fellow Face-Nappies stood in a ring 
protecting him. What he did was a criminal assault and with a 
crowd far outnumbering the police this can no longer be allowed to 
happen unchallenged. I get it when people chant ‘shame on you’ in 
these circumstances, but that is no longer enough. They have no 
shame those who do this. Crowds needs to start making a citizen’s 
arrest of the police who commit criminal offences and brutally attack 
innocent people and defenceless women. A citizen’s arrest can be 
made under section 24A of the UK Police and Criminal Evidence 
(PACE) Act of 1984 and you will find something similar in other 
countries. I prefer to call it a Common Law arrest rather than 
citizen’s for reasons I will come to shortly. Anyone can arrest a 
person committing an indictable offence or if they have reasonable 
grounds to suspect they are committing an indictable offence. On 
both counts the attack by the police thug would have fallen into this 
category. A citizen’s arrest can be made to stop someone: 


¢ Causing physical injury to himself or any other person 

e Suffering physical injury 

e Causing loss of or damage to property 

e Making off before a constable can assume responsibility for him 


A citizen’s arrest may also be made to prevent a breach of the 
peace under Common Law and if they believe a breach of the peace 
will happen or anything related to harm likely to be done or already 
done in their presence. This is the way to go I think — the Common 
Law version. If police know that the crowd and members of the 
public will no longer be standing and watching while they commit 


their thuggery and crimes they will think twice about acting like 
Brownshirts and Blackshirts. 


Common Law — common sense 

Mention of Common Law is very important. Most people think the 
law is the law as in one law. This is not the case. There are two 
bodies of law, Common Law and Statute Law, and they are not the 
same. Common Law is founded on the simple premise of do no 
harm. It does not recognise victimless crimes in which no harm is 
done while Statute Law does. There is a Statute Law against almost 
everything. So what is Statute Law? Amazingly it’s the law of the sea 
that was brought ashore by the Cult to override the law of the land 
which is Common Law. They had no right to do this and as always 
they did it anyway. They had to. They could not impose their will on 
the people through Common Law which only applies to do no harm. 
How could you stitch up the fine detail of people’s lives with that? 
Instead they took the law of the sea, or Admiralty Law, and applied 
it to the population. Statute Law refers to all the laws spewing out of 
governments and their agencies including all the fascist laws and 
regulations relating to ‘Covid’. The key point to make is that Statute 
Law is contract law. It only applies between contracting corporations. 
Most police officers don’t even know this. They have to be kept in 
the dark, too. Long ago when merchants and their sailing ships 
began to trade with different countries a contractual law was 
developed called Admiralty Law and other names. Again it only 
applied to contracts agreed between corporate entities. If there is no 
agreed contract the law of the sea had no jurisdiction and that still 
applies to its new alias of Statute Law. The problem for the Cult when 
the law of the sea was brought ashore was an obvious one. People 
were not corporations and neither were government entities. To 
overcome the latter they made governments and all associated 
organisations corporations. All the institutions are private 
corporations and I mean governments and their agencies, local 
councils, police, courts, military, US states, the whole lot. Go to the 


Dun and Bradstreet corporate listings website for confirmation that 
they are all corporations. You are arrested by a private corporation 
called the police by someone who is really a private security guard 
and they take you to court which is another private corporation. 
Neither have jurisdiction over you unless you consent and contract 
with them. This is why you hear the mantra about law enforcement 
policing by consent of the people. In truth the people ‘consent’ only 
in theory through monumental trickery. 


Okay, the Cult overcame the corporate law problem by making 
governments and institutions corporate entities; but what about 
people? They are not corporations are they? Ah ... well in a sense, 
and only a sense, they are. Not people exactly — the illusion of 
people. The Cult creates a corporation in the name of everyone at the 
time that their birth certificate is issued. Note birth/ berth certificate 
and when you go to court under the law of the sea on land you stand 
in a dock. These are throwbacks to the origin. My Common Law 
name is David Vaughan Icke. The name of the corporation created 
by the government when I was born is called Mr David Vaughan 
Icke usually written in capitals as MR DAVID VAUGHAN ICKE. 
That is not me, the living, breathing man. It is a fictitious corporate 
entity. The trick is to make you think that David Vaughan Icke and 
MR DAVID VAUGHAN ICKE are the same thing. They are not. When 
police charge you and take you to court they are prosecuting the 
corporate entity and not the living, breathing, man or woman. They 
have to trick you into identifying as the corporate entity and 
contracting with them. Otherwise they have no jurisdiction. They do 
this through a language known as legalese. Lawful and legal are not 
the same either. Lawful relates to Common Law and legal relates to 
Statute Law. Legalese is the language of Statue Law which uses 
terms that mean one thing to the public and another in legalese. 
Notice that when a police officer tells someone why they are being 
charged he or she will say at the end: ‘Do you understand?’ To the 
public that means ‘Do you comprehend?’ In legalese it means ‘Do 
you stand under me?’ Do you stand under my authority? If you say 


yes to the question you are unknowingly agreeing to give them 
jurisdiction over you in a contract between two corporate entities. 


This is a confidence trick in every way. Contracts have to be agreed 
between informed parties and if you don’t know that David 
Vaughan Icke is agreeing to be the corporation MR DAVID 
VAUGHAN ICKE you cannot knowingly agree to contract. They are 
deceiving you and another way they do this is to ask for proof of 
identity. You usually show them a driving licence or other document 
on which your corporate name is written. In doing so you are 
accepting that you are that corporate entity when you are not. 
Referring to yourself as a ‘person’ or ‘citizen’ is also identifying with 
your corporate fiction which is why I made the Common Law point 
about the citizen’s arrest. If you are approached by a police officer 
you identify yourself immediately as a living, breathing, man or 
woman and say ‘I do not consent, I do not contract with you and I do 
not understand’ or stand under their authority. I have a Common 
Law birth certificate as a living man and these are available at no 
charge from commonlawcourt.com. Businesses registered under the 
Statute Law system means that its laws apply. There are, however, 
ways to run a business under Common Law. Remember all ‘Covid’ 
laws and regulations are Statute Law — the law of contracts and you 
do not have to contract. This doesn’t mean that you can kill someone 
and get away with it. Common Law says do no harm and that 
applies to physical harm, financial harm etc. Police are employees of 
private corporations and there needs to be a new system of non- 
corporate Common Law constables operating outside the Statute 
Law system. If you go to davidicke.com and put Common Law into 
the search engine you will find videos that explain Common Law in 
much greater detail. It is definitely a road we should walk. 


With all my heart 


I have heard people say that we are in a spiritual war. I don’t like the 
term ‘war’ with its Wetiko dynamic, but I know what they mean. 
Sweep aside all the bodily forms and we are in a situation in which 
two states of consciousness are seeking very different realities. 


Wetiko wants upheaval, chaos, fear, suffering, conflict and control. 
The other wants love, peace, harmony, fairness and freedom. That's 
where we are. We should not fall for the idea that Wetiko is all- 
powerful and there’s nothing we can do. Wetiko is not all-powerful. 
It’s a joke, pathetic. It doesn’t have to be, but it has made that choice 
for now. A handful of times over the years when I have felt the 
presence of its frequency I have allowed it to attach briefly so I could 
consciously observe its nature. The experience is not pleasant, the 
energy is heavy and dark, but the ease with which you can kick it 
back out the door shows that its real power is in persuading us that 
it has power. It’s all a con. Wetiko is a con. It’s a trickster and not a 
power that can control us if we unleash our own. The con is founded 
on manipulating humanity to give its power to Wetiko which 
recycles it back to present the illusion that it has power when its 
power is ours that we gave away. This happens on an energetic level 
and plays out in the world of the seen as humanity giving its power 
to Wetiko authority which uses that power to control the population 
when the power is only the power the population has handed over. 
How could it be any other way for billions to be controlled by a 
relative few? I have had experiences with people possessed by 
Wetiko and again you can kick its arse if you do it with an open 
heart. Oh yes — the heart which can transform the world of perceived 
‘matter’. 


We are receiver-transmitters and processors of information, but 
what information and where from? Information is processed into 
perception in three main areas — the brain, the heart and the belly. 
These relate to thinking, knowing, and emotion. Wetiko wants us to 
be head and belly people which means we think within the confines 
of the Matrix simulation and low-vibrational emotional reaction 
scrambles balance and perception. A few minutes on social media 
and you see how emotion is the dominant force. Woke is all emotion 
and is therefore thought-free and fact-free. Our heart is something 
different. It knows while the head thinks and has to try to work it out 
because it doesn’t know. The human energy field has seven prime 
vortexes which connect us with wider reality (Fig 23). Chakra means 


‘wheels of light’ in the Sanskrit language of ancient India. The main 
ones are: The crown chakra on top of the head; brow (or ‘third eye’) 
chakra in the centre of the forehead; throat chakra; heart chakra in 
the centre of the chest; solar plexus chakra below the sternum; sacral 
chakra beneath the navel; and base chakra at the bottom of the spine. 
Each one has a particular function or functions. We feel anxiety and 
nervousness in the belly where the sacral chakra is located and this 
processes emotion that can affect the colon to give people ‘the shits’ 
or make them ‘shit scared’ when they are nervous. Chakras all play 
an important role, but the Mr and Mrs Big is the heart chakra which 
sits at the centre of the seven, above the chakras that connect us to 
the ‘physical’ and below those that connect with higher realms (or at 
least should). Here in the heart chakra we feel love, empathy and 
compassion — ‘My heart goes out to you’. Those with closed hearts 
become literally ‘heart-less’ in their attitudes and behaviour (see Bill 
Gates). Native Americans portrayed Wetiko with what Paul Levy 
calls a ‘frigid, icy heart, devoid of mercy’ (see Bill Gates). 


Figure 23: The chakra system which interpenetrates the human energy field. The heart chakra 
is the governor — or should be. 


Wetiko trembles at the thought of heart energy which it cannot 
infiltrate. The frequency is too high. What it seeks to do instead is 
close the heart chakra vortex to block its perceptual and energetic 
influence. Psychopaths have ‘hearts of stone’ and emotionally- 
damaged people have ‘heartache’ and ‘broken hearts’. The 
astonishing amount of heart disease is related to heart chakra 


disruption with its fundamental connection to the ‘physical’ heart. 
Dr Tom Cowan has written an outstanding book challenging the 
belief that the heart is a pump and making the connection between 
the ‘physical’ and spiritual heart. Rudolph Steiner who was way 
ahead of his time said the same about the fallacy that the heart is a 
pump. What? The heart is not a pump? That's crazy, right? 
Everybody knows that. Read Cowan’s Human Heart, Cosmic Heart 
and you will realise that the very idea of the heart as a pump is 
ridiculous when you see the evidence. How does blood in the feet so 
far from the heart get pumped horizontally up the body by the 
heart?? Cowan explains in the book the real reason why blood 
moves as it does. Our ‘physical’ heart is used to symbolise love when 
the source is really the heart vortex or spiritual heart which is our 
most powerful energetic connection to ‘out there’ expanded 
consciousness. That’s why we feel knowing — intuitive knowing — in 
the centre of the chest. Knowing doesn’t come from a process of 
thoughts leading to a conclusion. It is there in an instant all in one 
go. Our heart knows because of its connection to levels of awareness 
that do know. This is the meaning and source of intuition — intuitive 
knowing. 

For the last more than 30 years of uncovering the global game and 
the nature of reality my heart has been my constant antenna for 
truth and accuracy. An American intelligence insider once said that I 
had quoted a disinformer in one of my books and yet I had only 
quoted the part that was true. He asked: ‘How do you do that?’ By 
using my heart antenna was the answer and anyone can do it. Heart- 
centred is how we are meant to be. With a closed heart chakra we 
withdraw into a closed mind and the bubble of five-sense reality. If 
you take a moment to focus your attention on the centre of your 
chest, picture a spinning wheel of light and see it opening and 
expanding. You will feel it happening, too, and perceptions of the 
heart like joy and love as the heart impacts on the mind as they 
interact. The more the chakra opens the more you will feel 
expressions of heart consciousness and as the process continues, and 
becomes part of you, insights and knowings will follow. An open 


heart is connected to that level of awareness that knows all is One. 
You will see from its perspective that the fault-lines that divide us 
are only illusions to control us. An open heart does not process the 
illusions of race, creed and sexuality except as brief experiences for a 
consciousness that is all. Our heart does not see division, only unity 
(Figs 24 and 25). There’s something else, too. Our hearts love to 
laugh. Mark Twain’s quote that says ‘The human race has one really 
effective weapon, and that is laughter’ is really a reference to the 
heart which loves to laugh with the joy of knowing the true nature of 
infinite reality and that all the madness of human society is an 
illusion of the mind. Twain also said: ‘Against the assault of laughter 
nothing can stand.’ This is so true of Wetiko and the Cult. Their 
insecurity demands that they be taken seriously and their power and 
authority acknowledged and feared. We should do nothing of the 
sort. We should not get aggressive or fearful which their insecurity 
so desires. We should laugh in their face. Even in their no-face as 
police come over in their face-nappies and expect to be taken 
seriously. They don’t take themselves seriously looking like that so 
why should we? Laugh in the face of intimidation. Laugh in the face 
of tyranny. You will see by its reaction that you have pressed all of its 
buttons. Wetiko does not know what to do in the face of laughter or 
when its targets refuse to concede their joy to fear. We have seen 
many examples during the ‘Covid’ hoax when people have 
expressed their energetic power and the string puppets of Wetiko 
retreat with their tail limp between their knees. Laugh — the world is 
bloody mad after all and if it’s a choice between laughter and tears I 
know which way I’m going. 


Figure 24: Head consciousness without the heart sees division and everything apart from 
everything else. 


Figure 25: Heart consciousness sees everything as One. 


The foundation of Wetiko/Archon control of humans is the 
separation of incarnate five-sense mind from the infinite ‘I’ and 
closing the heart chakra where the True ‘T’ lives during a human life. 
The goal has been to achieve complete separation in both cases. I was 
interested therefore to read an account by a French energetic healer 
of what she said she experienced with a patient who had been given 
the ‘Covid’ vaccine. Genuine energy healers can sense information 
and consciousness fields at different levels of being which are 
referred to as ‘subtle bodies’. She described treating the patient who 
later returned after having, without the healer’s knowledge, two 
doses of the ‘Covid vaccine’. The healer said: 


| noticed immediately the change, very heavy energy emanating from [the] subtle bodies. The 
scariest thing was when | was working on the heart chakra, | connected with her soul: it was 
detached from the physical body, it had no contact and it was, as if it was floating in a state of 
total confusion: a damage to the consciousness that loses contact with the physical body, i.e. 
with our biological machine, there is no longer any communication between them. 


| continued the treatment by sending light to the heart chakra, the soul of the person, but it 
seemed that the soul could no longer receive any light, frequency or energy. It was a very 
powerful experience for me. Then | understood that this substance is indeed used to detach 
consciousness so that this consciousness can no longer interact through this body that it 
possesses in life, where there is no longer any contact, no frequency, no light, no more 
energetic balance or mind. 


This would create a human that is rudderless and at the extreme 
almost zombie-like operating with a fractional state of consciousness 
at the mercy of Wetiko. I was especially intrigued by what the healer 
said in the light of the prediction by the highly-informed Rudolf 
Steiner more than a hundred years ago. He said: 


In the future, we will eliminate the soul with medicine. Under the pretext of a ‘healthy point 
of view’, there will be a vaccine by which the human body will be treated as soon as possible 
directly at birth, so that the human being cannot develop the thought of the existence of soul 
and Spirit. To materialistic doctors will be entrusted the task of removing the soul of humanity. 


As today, people are vaccinated against this disease or that disease, so in the future, children 
will be vaccinated with a substance that can be produced precisely in such a way that people, 
thanks to this vaccination, will be immune to being subjected to the ‘madness’ of spiritual life. 
He would be extremely smart, but he would not develop a conscience, and that is the true 
goal of some materialistic circles. 


Steiner said the vaccine would detach the physical body from the 
etheric body (subtle bodies) and ‘once the etheric body is detached 
the relationship between the universe and the etheric body would 
become extremely unstable, and man would become an automaton’. 
He said ‘the physical body of man must be polished on this Earth by 
spiritual will — so the vaccine becomes a kind of arymanique 
(Wetiko) force’ and ‘man can no longer get rid of a given 
materialistic feeling’. Humans would then, he said, become 
‘materialistic of constitution and can no longer rise to the spiritual’. I 
have been writing for years about DNA being a receiver-transmitter 
of information that connects us to other levels of reality and these 
‘vaccines’ changing DNA can be likened to changing an antenna and 
what it can transmit and receive. Such a disconnection would clearly 
lead to changes in personality and perception. Steiner further 
predicted the arrival of AI. Big Pharma ‘Covid vaccine’ makers, 
expressions of Wetiko, are testing their DNA-manipulating evil on 
children as I write with a view to giving the ‘vaccine’ to babies. If it’s 
a soul-body disconnector — and I say that it is or can be — every child 
would be disconnected from ‘soul’ at birth and the ‘vaccine’ would 
create a closed system in which spiritual guidance from the greater 
self would play no part. This has been the ambition of Wetiko all 


along. A Pentagon video from 2005 was leaked of a presentation 
explaining the development of vaccines to change behaviour by their 
effect on the brain. Those that believe this is not happening with the 
‘Covid’ genetically-modifying procedure masquerading as a 
‘vaccine’ should make an urgent appointment with Naivety 
Anonymous. Klaus Schwab wrote in 2018: 


Neurotechnologies enable us to better influence consciousness and thought and to understand 
many activities of the brain. They include decoding what we are thinking in fine levels of 
detail through new chemicals and interventions that can influence our brains to correct for 
errors or enhance functionality. 


The plan is clear and only the heart can stop it. With every heart that 
opens, every mind that awakens, Wetiko is weakened. Heart and 
love are far more powerful than head and hate and so nothing like a 
majority is needed to turn this around. 


Beyond the Phantom 

Our heart is the prime target of Wetiko and so it must be the answer 
to Wetiko. We are our heart which is part of one heart, the infinite 
heart. Our heart is where the true self lives in a human life behind 
firewalls of five-sense illusion when an imposter takes its place — 
Phantom Self; but our heart waits patiently to be set free any time we 
choose to see beyond the Phantom, beyond Wetiko. A Wetikoed 
Phantom Self can wreak mass death and destruction while the love 
of forever is locked away in its heart. The time is here to unleash its 
power and let it sweep away the fear and despair that is Wetiko. 
Heart consciousness does not seek manipulated, censored, 
advantage for its belief or religion, its activism and desires. As an 
expression of the One it treats all as One with the same rights to 
freedom and opinion. Our heart demands fairness for itself no more 
than for others. From this unity of heart we can come together in 
mutual support and transform this Wetikoed world into what reality 
is meant to be —a place of love, joy, happiness, fairness, justice and 
freedom. Wetiko has another agenda and that’s why the world is as 


it is, but enough of this nonsense. Wetiko can’t stay where hearts are 
open and it works so hard to keep them closed. Fear is its currency 
and its food source and love in its true sense has no fear. Why would 
love have fear when it knows it is All That Is, Has Been, And Ever Can 
Be on an eternal exploration of all possibility? Love in this true sense 
is not the physical attraction that passes for love. This can be an 
expression of it, yes, but Infinite Love, a love without condition, goes 
far deeper to the core of all being. It is the core of all being. Infinite 
realty was born from love beyond the illusions of the simulation. 
Love infinitely expressed is the knowing that all is One and the 
swiftly-passing experience of separation is a temporary 
hallucination. You cannot disconnect from Oneness; you can only 
perceive that you have and withdraw from its influence. This is the 
most important of all perception trickery by the mind parasite that is 
Wetiko and the foundation of all its potential for manipulation. 


If we open our hearts, open the sluice gates of the mind, and 
redefine self-identity amazing things start to happen. Consciousness 
expands or contracts in accordance with self-identity. When true self 
is recognised as infinite awareness and label self — Phantom Self — is 
seen as only a series of brief experiences life is transformed. 
Consciousness expands to the extent that self-identity expands and 
everything changes. You see unity, not division, the picture, not the 
pixels. From this we can play the long game. No more is an 
experience something in and of itself, but a fleeting moment in the 
eternity of forever. Suddenly people in uniform and dark suits are no 
longer intimidating. Doing what your heart knows to be right is no 
longer intimidating and consequences for those actions take on the 
same nature of a brief experience that passes in the blink of an 
infinite eye. Intimidation is all in the mind. Beyond the mind there is 
no intimidation. 


An open heart does not consider consequences for what it knows 
to be right. To do so would be to consider not doing what it knows to 
be right and for a heart in its power that is never an option. The 
Renegade Mind is really the Renegade Heart. Consideration of 
consequences will always provide a getaway car for the mind and 


the heart doesn’t want one. What is right in the light of what we face 
today is to stop cooperating with Wetiko in all its forms and to do it 
without fear or compromise. You cannot compromise with tyranny 
when tyranny always demands more until it has everything. Life is 
your perception and you are your destiny. Change your perception 
and you change your life. Change collective perception and we 
change the world. 

Come on people ... One human family, One heart, One goal ... 
FREEEEEEDOM! 

We must settle for nothing less. 


he big scare story as the book goes to press is the ‘Indian’ 

variant and the world is being deluged with propaganda about 
the ‘Covid catastrophe’ in India which mirrors in its lies and 
misrepresentations what happened in Italy before the first lockdown 
in 2020. 


The New York Post published a picture of someone who had 
‘collapsed in the street from Covid’ in India in April, 2021, which 
was actually taken during a gas leak in May, 2020. Same old, same 
old. Media articles in mid-February were asking why India had been 
so untouched by ‘Covid’ and then as their vaccine rollout gathered 
pace the alleged ‘cases’ began to rapidly increase. Indian ‘Covid 
vaccine’ maker Bharat Biotech was funded into existence by the Bill 
and Melinda Gates Foundation (the pair announced their divorce in 
May, 2021, which is a pity because they so deserve each other). The 
Indian ‘Covid crisis’ was ramped up by the media to terrify the 
world and prepare people for submission to still more restrictions. 
The scam that worked the first time was being repeated only with far 
more people seeing through the deceit. Davidicke.com and 
Ickonic.com have sought to tell the true story of what is happening 
by talking to people living through the Indian nightmare which has 
nothing to do with ‘Covid’. We posted a letter from ‘Alisha’ in Pune 
who told a very different story to government and media mendacity. 
She said scenes of dying people and overwhelmed hospitals were 
designed to hide what was really happening — genocide and 
starvation. Alisha said that millions had already died of starvation 
during the ongoing lockdowns while government and media were 
lying and making it look like the ‘virus’: 


Restaurants, shops, gyms, theatres, basically everything is shut. The cities are ghost towns. 
Even so-called ‘essential’ businesses are only open till 11am in the morning. You basically 
have just an hour to buy food and then your time is up. 


Inter-state travel and even inter-district travel is banned. The cops wait at all major crossroads 
to question why you are traveling outdoors or to fine you if you are not wearing a mask. 


The medical community here is also complicit in genocide, lying about hospitals being full 
and turning away people with genuine illnesses, who need immediate care. They have even 
created a shortage of oxygen cylinders. 


This is the classic Cult modus operandi played out in every country. 
Alisha said that people who would not have a PCR test not testing 
for the ‘virus’ were being denied hospital treatment. She said the 
people hit hardest were migrant workers and those in rural areas. 
Most businesses employed migrant workers and with everything 
closed there were no jobs, no income and no food. As a result 
millions were dying of starvation or malnutrition. All this was 
happening under Prime Minister Narendra Modi, a 100-percent 
asset of the Cult, and it emphasises yet again the scale of pure anti- 
human evil we are dealing with. Australia banned its people from 
returning home from India with penalties for trying to do so of up to 
five years in jail and a fine of £37,000. The manufactured ‘Covid’ 
crisis in India was being prepared to justify further fascism in the 
West. Obvious connections could be seen between the Indian 
‘vaccine’ programme and increased ‘cases’ and this became a 
common theme. The Seychelles, the most per capita ‘Covid 
vaccinated’ population in the world, went back into lockdown after a 
‘surge of cases’. 


Long ago the truly evil Monsanto agricultural biotechnology 
corporation with its big connections to Bill Gates devastated Indian 
farming with genetically-modified crops. Human rights activist 
Gurcharan Singh highlighted the efforts by the Indian government 
to complete the job by destroying the food supply to hundreds of 
millions with ‘Covid’ lockdowns. He said that 415 million people at 
the bottom of the disgusting caste system (still going whatever they 
say) were below the poverty line and struggled to feed themselves 
every year. Now the government was imposing lockdown at just the 


time to destroy the harvest. This deliberate policy was leading to 
mass starvation. People may reel back at the suggestion that a 
government would do that, but Wetiko-controlled ‘leaders’ are 
capable of any level of evil. In fact what is described in India is in the 
process of being instigated worldwide. The food chain and food 
supply are being targeted at every level to cause world hunger and 
thus control. Bill Gates is not the biggest owner of farmland in 
America for no reason and destroying access to food aids both the 
depopulation agenda and the plan for synthetic ‘food’ already being 
funded into existence by Gates. Add to this the coming hyper- 
inflation from the suicidal creation of fake ‘money’ in response to 
‘Covid’ and the breakdown of container shipping systems and you 
have a cocktail that can only lead one way and is meant to. The Cult 
plan is to crash the entire system to ‘build back better’ with the Great 
Reset. 


‘Vaccine’ transmission 

Reports from all over the world continue to emerge of women 
suffering menstrual and fertility problems after having the fake 
‘vaccine’ and of the non-’vaccinated’ having similar problems when 
interacting with the ‘vaccinated’. There are far too many for 
‘coincidence’ to be credible. We’ve had menopausal women getting 
periods, others having periods stop or not stopping for weeks, 
passing clots, sometimes the lining of the uterus, breast 
irregularities, and miscarriages (which increased by 400 percent in 
parts of the United States). Non-‘vaccinated’ men and children have 
suffered blood clots and nose bleeding after interaction with the 
‘vaccinated’. Babies have died from the effects of breast milk from a 
‘vaccinated’ mother. Awake doctors — the small minority — 
speculated on the cause of non-’vaccinated’ suffering the same 
effects as the ‘vaccinated’. Was it nanotechnology in the synthetic 
substance transmitting frequencies or was it a straight chemical 
bioweapon that was being transmitted between people? I am not 
saying that some kind of chemical transmission is not one possible 
answer, but the foundation of all that the Cult does is frequency and 


this is fertile ground for understanding how transmission can 
happen. American doctor Carrie Madej, an internal medicine 
physician and osteopath, has been practicing for the last 20 years, 
teaching medical students, and she says attending different meetings 
where the agenda for humanity was discussed. Madej, who operates 
out of Georgia, did not dismiss other possible forms of transmission, 
but she focused on frequency in search of an explanation for 
transmission. She said the Moderna and Pfizer ‘vaccines’ contained 
nano-lipid particles as a key component. This was a brand new 
technology never before used on humanity. “They’re using a 
nanotechnology which is pretty much little tiny computer bits ... 
nanobots or hydrogel.’ Inside the ‘vaccines’ was ‘this sci-fi kind of 
substance’ which suppressed immune checkpoints to get into the 
cell. I referred to this earlier as the “Trojan horse’ technique that 
tricks the cell into opening a gateway for the self-replicating 
synthetic material and while the immune system is artificially 
suppressed the body has no defences. Madej said the substance 
served many purposes including an on-demand ability to ‘deliver 
the payload’ and using the nano ‘computer bits’ as biosensors in the 
body. ‘It actually has the ability to accumulate data from your body, 
like your breathing, your respiration, thoughts, emotions, all kinds 
of things.’ 

She said the technology obviously has the ability to operate 
through Wi-Fi and transmit and receive energy, messages, 
frequencies or impulses. ‘Just imagine you're getting this new 
substance in you and it can react to things all around you, the 5G, 
your smart device, your phones.’ We had something completely 
foreign in the human body that had never been launched large scale 
at a time when we were seeing 5G going into schools and hospitals 
(plus the Musk satellites) and she believed the ‘vaccine’ transmission 
had something to do with this: ‘... if these people have this inside of 
them ... it can act like an antenna and actually transmit it outwardly 
as well.’ The synthetic substance produced its own voltage and so it 
could have that kind of effect. This fits with my own contention that 
the nano receiver-transmitters are designed to connect people to the 


Smart Grid and break the receiver-transmitter connection to 
expanded consciousness. That would explain the French energy 
healer’s experience of the disconnection of body from ‘soul’ with 
those who have had the ‘vaccine’. The nanobots, self-replicating 
inside the body, would also transmit the synthetic frequency which 
could be picked up through close interaction by those who have not 
been ‘vaccinated’. Madej speculated that perhaps it was 5G and 
increased levels of other radiation that was causing the symptoms 
directly although interestingly she said that non-‘vaccinated’ 
patients had shown improvement when they were away from the 
‘vaccinated’ person they had interacted with. It must be remembered 
that you can control frequency and energy with your mind and you 
can consciously create energetic barriers or bubbles with the mind to 
stop damaging frequencies from penetrating your field. American 
paediatrician Dr Larry Palevsky said the ‘vaccine’ was not a ‘vaccine’ 
and was never designed to protect from a ‘viral’ infection. He called 
it ‘a massive, brilliant propaganda of genocide’ because they didn’t 
have to inject everyone to get the result they wanted. He said the 
content of the jabs was able to infuse any material into the brain, 
heart, lungs, kidneys, liver, sperm and female productive system. 
‘This is genocide; this is a weapon of mass destruction.’ At the same 
time American colleges were banning students from attending if 
they didn’t have this life-changing and potentially life-ending 
‘vaccine’. Class action lawsuits must follow when the consequences 
of this college fascism come to light. As the book was going to press 
came reports about fertility effects on sperm in ‘vaccinated’ men 
which would absolutely fit with what I have been saying and 
hospitals continued to fill with ‘vaccine’ reactions. Another question 
is what about transmission via blood transfusions? The NHS has 
extended blood donation restrictions from seven days after a ‘Covid 
vaccination’ to 28 days after even a sore arm reaction. 

I said in the spring of 2020 that the then touted ‘Covid vaccine’ 
would be ongoing each year like the flu jab. A year later Pfizer CEO, 
the appalling Albert Bourla, said people would ‘likely’ need a 
‘booster dose’ of the ‘vaccine’ within 12 months of getting ‘fully 


vaccinated’ and then a yearly shot. “Variants will play a key role’, he 
said confirming the point. Johnson & Johnson CEO Alex Gorsky also 
took time out from his ‘vaccine’ disaster to say that people may need 
to be vaccinated against ‘Covid-19% each year. UK Health Secretary, 
the psychopath Matt Hancock, said additional ‘boosters’ would be 
available in the autumn of 2021. This is the trap of the ‘vaccine 
passport’. The public will have to accept every last ‘vaccine’ they 
introduce, including for the fake ‘variants’, or it would cease to be 
valid. The only other way in some cases would be continuous testing 
with a test not testing for the ‘virus’ and what is on the swabs 
constantly pushed up your noise towards the brain every time? 


‘Vaccines’ changing behaviour 

I mentioned in the body of the book how I believed we would see 
gathering behaviour changes in the ‘vaccinated’ and I am already 
hearing such comments from the non-‘vaccinated’ describing 
behaviour changes in friends, loved ones and work colleagues. This 
will only increase as the self-replicating synthetic material and 
nanoparticles expand in body and brain. An article in the Guardian in 
2016 detailed research at the University of Virginia in Charlottesville 
which developed a new method for controlling brain circuits 
associated with complex animal behaviour. The method, dubbed 
‘magnetogenetics’, involves genetically-engineering a protein called 
ferritin, which stores and releases iron, to create a magnetised 
substance — ‘Magneto’ — that can activate specific groups of nerve 
cells from a distance. This is claimed to be an advance on other 
methods of brain activity manipulation known as optogenetics and 
chemogenetics (the Cult has been developing methods of brain 
control for a long time). The ferritin technique is said to be non- 
invasive and able to activate neurons ‘rapidly and reversibly’. In 
other words, human thought and perception. The article said that 
earlier studies revealed how nerve cell proteins ‘activated by heat 
and mechanical pressure can be genetically engineered so that they 
become sensitive to radio waves and magnetic fields, by attaching 
them to an iron-storing protein called ferritin, or to inorganic 


paramagnetic particles’. Sensitive to radio waves and magnetic 
fields? You mean like 5G, 6G and 7G? This is the human-AI Smart 
Grid hive mind we are talking about. The Guardian article said: 


... the researchers injected Magneto into the striatum of freely behaving mice, a deep brain 
structure containing dopamine-producing neurons that are involved in reward and motivation, 
and then placed the animals into an apparatus split into magnetised and non-magnetised 
sections. 


Mice expressing Magneto spent far more time in the magnetised areas than mice that did not, 
because activation of the protein caused the striatal neurons expressing it to release 
dopamine, so that the mice found being in those areas rewarding. This shows that Magneto 
can remotely control the firing of neurons deep within the brain, and also control complex 
behaviours. 


Make no mistake this basic methodology will be part of the ‘Covid 
vaccine’ cocktail and using magnetics to change brain function 
through electromagnetic field frequency activation. The Pentagon is 
developing a ‘Covid vaccine’ using ferritin. Magnetics would explain 
changes in behaviour and why videos are appearing across the 
Internet as I write showing how magnets stick to the skin at the 
point of the ‘vaccine’ shot. Once people take these ‘vaccines’ 
anything becomes possible in terms of brain function and illness 
which will be blamed on ‘Covid-19 and ‘variants’. Magnetic field 
manipulation would further explain why the non-‘vaccinated’ are 
reporting the same symptoms as the ‘vaccinated’ they interact with 
and why those symptoms are reported to decrease when not in their 
company. Interestingly ‘Magneto’, a ‘mutant’, is a character in the 
Marvel Comic X-Men stories with the ability to manipulate magnetic 
fields and he believes that mutants should fight back against their 
human oppressors by any means necessary. The character was born 
Erik Lehnsherr to a Jewish family in Germany. 


Cult-controlled courts 

The European Court of Human Rights opened the door for 
mandatory ‘Covid-19 vaccines’ across the continent when it ruled in 
a Czech Republic dispute over childhood immunisation that legally 


enforced vaccination could be ‘necessary in a democratic society’. 
The 17 judges decided that compulsory vaccinations did not breach 
human rights law. On the face of it the judgement was so inverted 
you gasp for air. If not having a vaccine infused into your body is not 
a human right then what is? Ah, but they said human rights law 
which has been specifically written to delete all human rights at the 
behest of the state (the Cult). Article 8 of the European Convention 
on Human Rights relates to the right to a private life. The crucial 
word here is ‘except’: 


There shall be no interference by a public authority with the exercise of this right EXCEPT 
such as is in accordance with the law and is necessary in a democratic society in the interests 
of national security, public safety or the economic wellbeing of the country, for the prevention 
of disorder or crime, for the protection of health or morals, or for the protection of the rights 
and freedoms of others [My emphasis]. 


No interference except in accordance with the law means there are no 
‘human rights’ except what EU governments decide you can have at 
their behest. ‘As is necessary in a democratic society’ explains that 
reference in the judgement and ‘in the interests of national security, 
public safety or the economic well-being of the country, for the 
prevention of disorder or crime, for the protection of health or 
morals, or for the protection of the rights and freedoms of others’ 
gives the EU a coach and horses to ride through ‘human rights’ and 
scatter them in all directions. The judiciary is not a check and 
balance on government extremism; it is a vehicle to enforce it. This 
judgement was almost laughably predictable when the last thing the 
Cult wanted was a decision that went against mandatory 
vaccination. Judges rule over and over again to benefit the system of 
which they are a part. Vaccination disputes that come before them 
are invariably delivered in favour of doctors and authorities 
representing the view of the state which owns the judiciary. Oh, yes, 
and we have even had calls to stop putting ‘Covid-19’ on death 
certificates within 28 days of a ‘positive test’ because it is claimed the 
practice makes the ‘vaccine’ appear not to work. They are laughing 
at you. 


The scale of madness, inhumanity and things to come was 
highlighted when those not ‘vaccinated’ for “‘Covid’ were refused 
evacuation from the Caribbean island of St Vincent during massive 
volcanic eruptions. Cruise ships taking residents to the safety of 
another island allowed only the ‘vaccinated’ to board and the rest 
were left to their fate. Even in life and death situations like this we 
see ‘Covid’ stripping people of their most basic human instincts and 
the insanity is even more extreme when you think that fake 
‘vaccine’-makers are not even claiming their body-manipulating 
concoctions stop ‘infection’ and ‘transmission’ of a ‘virus’ that 
doesn’t exist. St Vincent Prime Minister Ralph Gonsalves said: ‘The 
chief medical officer will be identifying the persons already 
vaccinated so that we can get them on the ship.’ Note again the 
power of the chief medical officer who, like Whitty in the UK, will be 
answering to the World Health Organization. This is the Cult 
network structure that has overridden politicians who ‘follow the 
science’ which means doing what WHO-controlled ‘medical officers’ 
and ‘science advisers’ tell them. Gonsalves even said that residents 
who were ‘vaccinated’ after the order so they could board the ships 
would still be refused entry due to possible side effects such as 
‘wooziness in the head’. The good news is that if they were woozy 
enough in the head they could qualify to be prime minister of St 
Vincent. 


Microchipping freedom 

The European judgement will be used at some point to justify moves 
to enforce the ‘Covid’ DNA-manipulating procedure. Sandra Ro, 
CEO of the Global Blockchain Business Council, told a World 
Economic Forum event that she hoped ‘vaccine passports’ would 
help to ‘drive forced consent and standardisation’ of global digital 
identity schemes: ‘I’m hoping with the desire and global demand for 
some sort of vaccine passport — so that people can get travelling and 
working again — [it] will drive forced consent, standardisation, and 
frankly, cooperation across the world.’ The lady is either not very 
bright, or thoroughly mendacious, to use the term ‘forced consent’. 


You do not ‘consent’ if you are forced — you submit. She was 
describing what the plan has been all along and that’s to enforce a 
digital identity on every human without which they could not 
function. ‘Vaccine passports’ are opening the door and are far from 
the end goal. A digital identity would allow you to be tracked in 
everything you do in cyberspace and this is the same technique used 
by Cult-owned China to enforce its social credit system of total 
control. The ultimate ‘passport’ is planned to be a microchip as my 
books have warned for nearly 30 years. Those nice people at the 
Pentagon working for the Cult-controlled Defense Advanced 
Research Projects Agency (DARPA) claimed in April, 2021, they 
have developed a microchip inserted under the skin to detect 
‘asymptomatic Covid-19 infection’ before it becomes an outbreak 
and a ‘revolutionary filter’ that can remove the ‘virus’ from the 
blood when attached to a dialysis machine. The only problems with 
this are that the ‘virus’ does not exist and people transmitting the 
‘virus’ with no symptoms is brain-numbing bullshit. This is, of 
course, not a ruse to get people to be microchipped for very different 
reasons. DARPA also said it was producing a one-stop ‘vaccine’ for 
the ‘virus’ and all ‘variants’. One of the most sinister organisations 
on Planet Earth is doing this? Better have it then. These people are 
insane because Wetiko that possesses them is insane. 


Researchers from the Salk Institute in California announced they 
have created an embryo that is part human and part monkey. My 
books going back to the 1990s have exposed experiments in top 
secret underground facilities in the United States where humans are 
being crossed with animal and non-human ‘extraterrestrial’ species. 
They are now easing that long-developed capability into the public 
arena and there is much more to come given we are dealing with 
psychiatric basket cases. Talking of which — Elon Musk’s scientists at 
Neuralink trained a monkey to play Pong and other puzzles on a 
computer screen using a joystick and when the monkey made the 
correct move a metal tube squirted banana smoothie into his mouth 
which is the basic technique for training humans into unquestioning 
compliance. Two Neuralink chips were in the monkey’s skull and 


more than 2,000 wires ‘fanned out’ into its brain. Eventually the 
monkey played a video game purely with its brain waves. 
Psychopathic narcissist Musk said the ‘breakthrough’ was a step 
towards putting Neuralink chips into human skulls and merging 
minds with artificial intelligence. Exactly. This man is so dark and 
Cult to his DNA. 


World Economic Fascism (WEF) 

The World Economic Forum is telling you the plan by the statements 
made at its many and various events. Cult-owned fascist YouTube 
CEO Susan Wojcicki spoke at the 2021 WEF Global Technology 
Governance Summit (see the name) in which 40 governments and 
150 companies met to ensure ‘the responsible design and 
deployment of emerging technologies’. Orwellian translation: 
‘Ensuring the design and deployment of long-planned technologies 
will advance the Cult agenda for control and censorship.’ Freedom- 
destroyer and Nuremberg-bound Wojcicki expressed support for 
tech platforms like hers to censor content that is ‘technically legal but 
could be harmful’. Who decides what is ‘harmful’? She does and 
they do. ‘Harmful’ will be whatever the Cult doesn’t want people to 
see and we have legislation proposed by the UK government that 
would censor content on the basis of ‘harm’ no matter if the 
information is fair, legal and provably true. Make that especially if it 
is fair, legal and provably true. Wojcicki called for a global coalition 
to be formed to enforce content moderation standards through 
automated censorship. This is a woman and mega-censor So self- 
deluded that she shamelessly accepted a ‘free expression’ award — 
Wojcicki — in an event sponsored by her own YouTube. They have no 
shame and no self-awareness. 


You know that ‘Covid’ is a scam and Wojcicki a Cult operative 
when YouTube is censoring medical and scientific opinion purely on 
the grounds of whether it supports or opposes the Cult ‘Covid’ 
narrative. Florida governor Ron DeSantis compiled an expert panel 
with four professors of medicine from Harvard, Oxford, and 
Stanford Universities who spoke against forcing children and 


vaccinated people to wear masks. They also said there was no proof 
that lockdowns reduced spread or death rates of ‘Covid-19’. Cult- 
gofer Wojcicki and her YouTube deleted the panel video ‘because it 
included content that contradicts the consensus of local and global 
health authorities regarding the efficacy of masks to prevent the 
spread of Covid-19’. This ‘consensus’ refers to what the Cult tells the 
World Health Organization to say and the WHO tells ‘local health 
authorities’ to do. Wojcicki knows this, of course. The panellists 
pointed out that censorship of scientific debate was responsible for 
deaths from many causes, but Wojcicki couldn't care less. She would 
not dare go against what she is told and as a disgrace to humanity 
she wouldn't want to anyway. The UK government is seeking to pass 
a fascist ‘Online Safety Bill’ to specifically target with massive fines 
and other means non-censored video and social media platforms to 
make them censor ‘lawful but harmful’ content like the Cult-owned 
Facebook, Twitter, Google and YouTube. What is ‘lawful but 
harmful’ would be decided by the fascist Blair-created Ofcom. 


Another WEF obsession is a cyber-attack on the financial system 
and this is clearly what the Cult has planned to take down the bank 
accounts of everyone — except theirs. Those that think they have 
enough money for the Cult agenda not to matter to them have got a 
big lesson coming if they continue to ignore what is staring them in 
the face. The World Economic Forum, funded by Gates and fronted 
by Klaus Schwab, announced it would be running a ‘simulation’ 
with the Russian government and global banks of just such an attack 
called Cyber Polygon 2021. What they simulate — as with the ‘Covid’ 
Event 201 — they plan to instigate. The WEF is involved in a project 
with the Cult-owned Carnegie Endowment for International Peace 
called the WEF-Carnegie Cyber Policy Initiative which seeks to 
merge Wall Street banks, ‘regulators’ (I love it) and intelligence 
agencies to ‘prevent’ (arrange and allow) a cyber-attack that would 
bring down the global financial system as long planned by those that 
control the WEF and the Carnegie operation. The Carnegie 
Endowment for International Peace sent an instruction to First World 


War US President Woodrow Wilson not to let the war end before 
society had been irreversibly transformed. 


The Wuhan lab diversion 

As I close, the Cult-controlled authorities and lapdog media are 
systematically pushing ‘the virus was released from the Wuhan lab’ 
narrative. There are two versions — it happened by accident and it 
happened on purpose. Both are nonsense. The perceived existence of 
the never-shown-to-exist ‘virus’ is vital to sell the impression that 
there is actually an infective agent to deal with and to allow the 
endless potential for terrifying the population with ‘variants’ of a 
‘virus’ that does not exist. The authorities at the time of writing are 
going with the ‘by accident’ while the alternative media is 
promoting the ‘on purpose’. Cable news host Tucker Carlson who 
has questioned aspects of lockdown and ‘vaccine’ compulsion has 
bought the Wuhan lab story. ‘Everyone now agrees’ he said. Well, I 
don’t and many others don’t and the question is why does the system 
and its media suddenly ‘agree’? When the media moves as one unit 
with a narrative it is always a lie — witness the hour by hour 
mendacity of the ‘Covid’ era. Why would this Cult-owned 
combination which has unleashed lies like machine gun fire 
suddenly ‘agree’ to tell the truth?? 

Much of the alternative media is buying the lie because it fits the 
conspiracy narrative, but it’s the wrong conspiracy. The real 
conspiracy is that there is no virus and that is what the Cult is 
desperate to hide. The idea that the ‘virus’ was released by accident 
is ludicrous when the whole ‘Covid’ hoax was clearly long-planned 
and waiting to be played out as it was so fast in accordance with the 
Rockefeller document and Event 201. So they prepared everything in 
detail over decades and then sat around strumming their fingers 
waiting for an ‘accidental’ release from a bio-lab? What?? It’s crazy. 
Then there’s the ‘on purpose’ claim. You want to circulate a ‘deadly 
virus’ and hide the fact that you’ve done so and you release it down 
the street from the highest-level bio-lab in China? I repeat — What? ? 


You would release it far from that lab to stop any association being 
made. But, no, we’ll do it in a place where the connection was certain 
to be made. Why would you need to scam ‘cases’ and ‘deaths’ and 
pay hospitals to diagnose ‘Covid-19’ if you had a real ‘virus’? What 
are sections of the alternative media doing believing this crap? 
Where were all the mass deaths in Wuhan from a ‘deadly pathogen’ 
when the recovery to normal life after the initial propaganda was 
dramatic in speed? Why isn’t the ‘deadly pathogen’ now circulating 
all over China with bodies in the street? Once again we have the 
technique of tell them what they want to hear and they will likely 
believe it. The alternative media has its ‘conspiracy’ and with 
Carlson it fits with his ‘China is the danger’ narrative over years. 
China is a danger as a global Cult operations centre, but not for this 
reason. The Wuhan lab story also has the potential to instigate 
conflict with China when at some stage the plan is to trigger a 
Problem-Reaction-Solution confrontation with the West. Question 
everything — everything — and especially when the media agrees on a 
common party line. 


Third wave ... fourth wave ... fifth wave... 

As the book went into production the world was being set up for 
more lockdowns and a ‘third wave’ supported by invented ‘variants’ 
that were increasing all the time and will continue to do so in public 
statements and computer programs, but not in reality. India became 
the new Italy in the ‘Covid’ propaganda campaign and we were told 
to be frightened of the new ‘Indian strain’. Somehow I couldn’t find 
it within myself to do so. A document produced for the UK 
government entitled ‘Summary of further modelling of easing of 
restrictions — Roadmap Step 2’ declared that a third wave was 
inevitable (of course when it’s in the script) and it would be the fault 
of children and those who refuse the health-destroying fake ‘Covid 
vaccine’. One of the computer models involved came from the Cult- 
owned Imperial College and the other from Warwick University 
which I wouldn't trust to tell me the date in a calendar factory. The 
document states that both models presumed extremely high uptake 


of the ‘Covid vaccines’ and didn’t allow for ‘variants’. The document 
states: ‘The resurgence is a result of some people (mostly children) 
being ineligible for vaccination; others choosing not to receive the 
vaccine; and others being vaccinated but not perfectly protected.’ 
The mendacity takes the breath away. Okay, blame those with a 
brain who won't take the DNA-modifying shots and put more 
pressure on children to have it as ‘trials’ were underway involving 
children as young as six months with parents who give insanity a 
bad name. Massive pressure is being put on the young to have the 
fake ‘vaccine’ and child age consent limits have been systematically 
lowered around the world to stop parents intervening. Most 
extraordinary about the document was its claim that the ‘third wave’ 
would be driven by ‘the resurgence in both hospitalisations and 
deaths ... dominated by those that have received two doses of the vaccine, 
comprising around 60-70% of the wave respectively’. The predicted 
peak of the ‘third wave’ suggested 300 deaths per day with 250 of 
them fully ‘vaccinated’ people. How many more lies do acquiescers 
need to be told before they see the obvious? Those who took the jab 
to ‘protect themselves’ are projected to be those who mostly get sick 
and die? So what's in the ‘vaccine’? The document went on: 


It is possible that a summer of low prevalence could be followed by substantial increases in 
incidence over the following autumn and winter. Low prevalence in late summer should not 
be taken as an indication that SARS-CoV-2 has retreated or that the population has high 
enough levels of immunity to prevent another wave. 


They are telling you the script and while many British people 
believed ‘Covid’ restrictions would end in the summer of 2021 the 
government was preparing for them to be ongoing. Authorities were 
awarding contracts for ‘Covid marshals’ to police the restrictions 
with contracts starting in July, 2021, and going through to January 
31st, 2022, and the government was advertising for ‘Media Buying 
Services’ to secure media propaganda slots worth a potential £320 
million for ‘Covid-19 campaigns’ with a contract not ending until 
March, 2022. The recipient — via a list of other front companies — was 
reported to be American media marketing giant Omnicom Group 


Inc. While money is no object for “‘Covid’ the UK waiting list for all 
other treatment — including life-threatening conditions — passed 4.5 
million. Meantime the Cult is seeking to control all official ‘inquiries’ 
to block revelations about what has really been happening and why. 
It must not be allowed to — we need Nuremberg jury trials in every 
country. The cover-up doesn’t get more obvious than appointing 
ultra-Zionist professor Philip Zelikow to oversee two dozen US 
virologists, public health officials, clinicians, former government 
officials and four American ‘charitable foundations’ to ‘learn the 
lessons’ of the ‘Covid’ debacle. The personnel will be those that 
created and perpetuated the ‘Covid’ lies while Zelikow is the former 
executive director of the 9/11 Commission who ensured that the 
truth about those attacks never came out and produced a report that 
must be among the most mendacious and manipulative documents 
ever written — see The Trigger for the detailed exposure of the almost 
unimaginable 9/11 story in which Sabbatians can be found at every 
level. 


Passive no more 

People are increasingly challenging the authorities with amazing 
numbers of people taking to the streets in London well beyond the 
ability of the Face-Nappies to stop them. Instead the Nappies choose 
situations away from the mass crowds to target, intimidate, and seek 
to promote the impression of ‘violent protestors’. One such incident 
happened in London’s Hyde Park. Hundreds of thousands walking 
through the streets in protest against ‘Covid’ fascism were ignored 
by the Cult-owned BBC and most of the rest of the mainstream 
media, but they delighted in reporting how police were injured in 
‘clashes with protestors’. The truth was that a group of people 
gathered in Hyde Park at the end of one march when most had gone 
home and they were peacefully having a good time with music and 
chat. Face-Nappies who couldn’t deal with the full-march crowd 
then waded in with their batons and got more than they bargained 
for. Instead of just standing for this criminal brutality the crowd 
used their numerical superiority to push the Face-Nappies out of the 


park. Eventually the Nappies turned and ran. Unfortunately two or 
three idiots in the crowd threw drink cans striking two officers 
which gave the media and the government the image they wanted to 
discredit the 99.9999 percent who were peaceful. The idiots walked 
straight into the trap and we must always be aware of potential 
agent provocateurs used by the authorities to discredit their targets. 


This response from the crowd — the can people apart — must be a 
turning point when the public no longer stand by while the innocent 
are arrested and brutally attacked by the Face-Nappies. That doesn’t 
mean to be violent, that’s the last thing we need. We'll leave the 
violence to the Face-Nappies and government. But it does mean that 
when the Face-Nappies use violence against peaceful people the 
numerical superiority is employed to stop them and make citizen’s 
arrests or Common Law arrests for a breach of the peace. The time 
for being passive in the face of fascism is over. 


We are the many, they are the few, and we need to make that count 
before there is no freedom left and our children and grandchildren 
face an ongoing fascist nightmare. 


COME ON PEOPLE - IT’S TIME. 


One final thought ... 


The power of love 
A force from above 
Cleaning my soul 
Flame on burn desire 
Love with tongues of fire 
Purge the soul 
Make love your goal 


I’ll protect you from the hooded claw 
Keep the vampires from your door 
When the chips are down I'll be around 
With my undying, death-defying 
Love for you 


Envy will hurt itself 
Let yourself be beautiful 
Sparkling love, flowers 
And pearls and pretty girls 
Love is like an energy 
Rushin’ rushin’ inside of me 


This time we go sublime 
Lovers entwine, divine, divine, 
Love is danger, love is pleasure 
Love is pure — the only treasure 


I’m so in love with you 
Purge the soul 
Make love your goal 


The power of love 
A force from above 
Cleaning my soul 
The power of love 
A force from above 
A sky-scraping dove 


Flame on burn desire 
Love with tongues of fire 
Purge the soul 
Make love your goal 


Frankie Goes To Hollywood 


APPENDIX 


Isolation: The action of isolating; the fact or condition of being 
isolated or standing alone; separation from other things or persons; 
solitariness 
Oxford English Dictionary 


he controversy over whether the SARS-CoV-2 virus has ever 

been isolated or purified continues. However, using the above 
definition, common sense, the laws of logic and the dictates of 
science, any unbiased person must come to the conclusion that the 
SARS-CoV-2 virus has never been isolated or purified. As a result, no 
confirmation of the virus’ existence can be found. The logical, 
common sense, and scientific consequences of this fact are: 


e the structure and composition of something not shown to exist 
can’t be known, including the presence, structure, and function of 
any hypothetical spike or other proteins; 

e the genetic sequence of something that has never been found can’t 
be known; 


e “variants” of something that hasn’t been shown to exist can’t be 
known; 


e it’s impossible to demonstrate that SARS-CoV-2 causes a disease 
called Covid-19. 


In as concise terms as possible, here’s the proper way to isolate, 
characterize and demonstrate a new virus. First, one takes samples 
(blood, sputum, secretions) from many people (e.g. 500) with 
symptoms which are unique and specific enough to characterize an 
illness. Without mixing these samples with ANY tissue or products 
that also contain genetic material, the virologist macerates, filters 
and ultracentrifuges i.e. purifies the specimen. This common virology 
technique, done for decades to isolate bacteriophages! and so-called 
giant viruses in every virology lab, then allows the virologist to 
demonstrate with electron microscopy thousands of identically sized 
and shaped particles. These particles are the isolated and purified 
virus. 


These identical particles are then checked for uniformity by 
physical and/or microscopic techniques. Once the purity is 
determined, the particles may be further characterized. This would 
include examining the structure, morphology, and chemical 
composition of the particles. Next, their genetic makeup is 
characterized by extracting the genetic material directly from the 
purified particles and using genetic-sequencing techniques, such as 
Sanger sequencing, that have also been around for decades. Then 
one does an analysis to confirm that these uniform particles are 
exogenous (outside) in origin as a virus is conceptualized to be, and 
not the normal breakdown products of dead and dying tissues.” (As 
of May 2020, we know that virologists have no way to determine 
whether the particles they’re seeing are viruses or just normal break- 


down products of dead and dying tissues.)° 


1 Isolation, characterization and analysis of bacteriophages from the haloalkaline lake Elmenteita, 
KenyaJuliah Khayeli AKhwale et al, PLOS One, Published: April 25, 2019. 
https://journals.plos.org/plosone/article?id=10.1371/journal.pone.d215734 — accessed 2/15/21 


2 "Extracellular Vesicles Derived From Apoptotic Cells: An Essential Link Between Death and 
Regeneration,” Maojiao Lil et al, Frontiers in Cell and Developmental Biology, 2020 October 2. 
https://wwwfrontiersin.org/articles/10.3389/fcell.2020.573511/full — accessed 2/15/21 


3 "The Role of Extraellular Vesicles as Allies of HIV, HCV and SARS Viruses,” Flavia Giannessi, et al, 
Viruses, 2020 May 


If we have come this far then we have fully isolated, characterized, 
and genetically sequenced an exogenous virus particle. However, we 
still have to show it is causally related to a disease. This is carried 
out by exposing a group of healthy subjects (animals are usually 
used) to this isolated, purified virus in the manner in which the 
disease is thought to be transmitted. If the animals get sick with the 
same disease, as confirmed by clinical and autopsy findings, one has 
now shown that the virus actually causes a disease. This 
demonstrates infectivity and transmission of an infectious agent. 


None of these steps has even been attempted with the SARS-CoV-2 
virus, nor have all these steps been successfully performed for any 
so-called pathogenic virus. Our research indicates that a single study 
showing these steps does not exist in the medical literature. 


Instead, since 1954, virologists have taken unpurified samples 
from a relatively few people, often less than ten, with a similar 
disease. They then minimally process this sample and inoculate this 
unpurified sample onto tissue culture containing usually four to six 
other types of material — all of which contain identical genetic 
material as to what is called a “virus.” The tissue culture is starved 
and poisoned and naturally disintegrates into many types of 
particles, some of which contain genetic material. Against all 
common sense, logic, use of the English language and scientific 
integrity, this process is called “virus isolation.” This brew 
containing fragments of genetic material from many sources is then 
subjected to genetic analysis, which then creates in a computer- 
simulation process the alleged sequence of the alleged virus, a so 
called in silico genome. At no time is an actual virus confirmed by 
electron microscopy. At no time is a genome extracted and 
sequenced from an actual virus. This is scientific fraud. 


The observation that the unpurified specimen — inoculated onto 
tissue culture along with toxic antibiotics, bovine fetal tissue, 
amniotic fluid and other tissues — destroys the kidney tissue onto 
which it is inoculated is given as evidence of the virus’ existence and 
pathogenicity. This is scientific fraud. 


From now on, when anyone gives you a paper that suggests the 
SARS-CoV-2 virus has been isolated, please check the methods 
sections. If the researchers used Vero cells or any other culture 
method, you know that their process was not isolation. You will hear 
the following excuses for why actual isolation isn’t done: 


1. There were not enough virus particles found in samples from patients to analyze. 


2. Viruses are intracellular parasites; they can’t be found outside the cell in this manner. 


If No. 1 is correct, and we can’t find the virus in the sputum of sick 
people, then on what evidence do we think the virus is dangerous or 
even lethal? If No. 2 is correct, then how is the virus spread from 
person to person? We are told it emerges from the cell to infect 
others. Then why isn’t it possible to find it? 


Finally, questioning these virology techniques and conclusions is 
not some distraction or divisive issue. Shining the light on this truth 
is essential to stop this terrible fraud that humanity is confronting. 
For, as we now know, if the virus has never been isolated, sequenced 
or shown to cause illness, if the virus is imaginary, then why are we 
wearing masks, social distancing and putting the whole world into 
prison? 


Finally, if pathogenic viruses don’t exist, then what is going into 
those injectable devices erroneously called “vaccines,” and what is 
their purpose? This scientific question is the most urgent and 
relevant one of our time. 


We are correct. The SARS-CoV? virus does not exist. 


Sally Fallon Morell, MA 
Dr. Thomas Cowan, MD 
Dr. Andrew Kaufman, MD 
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THE ALTERNATIVE 


Ickonic is something that has been a dream of mine for the last 5 years, 
growing up around alternative information | have always had a natural interest 
in what is going on in the World and what could | do to make it better. 

Across the range of subjects and positions of influence occupied mainly by 
people who don’t strive to make things better it's the Media that | have always 
found the most frustrating and fascinating. Mainly because if the Media did their 
Jobs properly then so much of the negative things happening in the World 
simply would not be able to happen. because they would be exposed within a 
heartbeat. 

Free Press and the Opportunities that the internet could have given would mean 
that the Media are able to expose things like never before and hold people to 
account for their actions. As we all know there are ‘Untouchables’ that walk 
among us, people the Media simply won't touch, expose or investigate and that 
leads to the dark underworlds that infest the establishment the World over. 
Well | say enough, it’s time for something different, a different kind of Media, 
where no one is off limits from exposing and investigating. All we're interested 
in at Ickonic is the truth of what is really going on in the World on whichever 
subject we're covering. 

We hope you enjoy what we have created and take something away from the 
platform, we aim to deliver information that's informative and most importantly 
self-empowering. you're not a little person. you're part of something much 
bigger than that and its time we as a collective race began to understand that 
and look to the future as ours to take. 


It's time... 


Jaymie Icke - Founder Ickonic Alternative Media. 


SIGN UP NOW AT ICKONIC.COM 


DAVID ICKE 


THE ANSWER 


THE ANSWER 


DAVIDICKE 


We live in extraordinary times with billions bewildered and seeking answers for what 
is happening. David Icke, the man who has been proved right again and again, has 
spent 30 years uncovering the truth behind world affairs and in a stream of previous 
books he predicted current events. 


The Answer will change your every perception of life and the world and set you free of 


the illusions that control human society. There is nothing more vital for our collective 
freedom than humanity becoming aware of what is in this book 


Available now at davidicke.com. 
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DAVIDICKE.COM 


DAVID ICKE STORE 
LATEST NEWS ARTICLES 
DAVID ICKE VIDEOS 
WEEKLY DOT-CONNECTOR PODCASTS 
LIVE EVENTS 
WWW.DAVIDICKE.COM 


THE LIFE STORY OF DAVID ICKE 


RENEGADE 


/‘rent gerd/ THE FEATURE LENGTH FILM 


noun 
A person who behaves in a rebelliously unconventional manner. 


AVAILABLE NOW AT DAVIDICKE.COM 


2 NEW BOOKS 
BY NEIL HAGUE 


_ CUTTING EDGE VISIONARY ART 
774 UNIQUE ILLUSTRATED BOOKS 


FOR 


BOOKS, PRINTS & T-SHIRTS 


NEILHAGUEBOO 


OR NEILHAGUE.COM 


Before you go... 


For more detail, background and evidence about the subjects in 
Perceptions of a Renegade Mind — and so much more — see my 
others books including And The Truth Shall Set You Free; The 
Biggest Secret; Children of the Matrix; The David Icke Guide to the 
Global Conspiracy; Tales from the Time Loop; The Perception 
Deception; Remember Who You Are; Human Race Get Off Your 
Knees; Phantom Self; Everything You Need To Know But Have Never 
Been Told, The Trigger and The Answer. 


You can subscribe to the fantastic new Ickonic media platform 
where there are many hundreds of hours of cutting-edge 
information in videos, documentaries and series across a whole 
range of subjects which are added to every week. This includes 
my 90 minute breakdown of the week’s news every Friday to 
explain why events are happening and to what end. 


